javascript 修改图片地址（判断图片是否加载成功）

àì夳堔傛蜴生んèń 2021-11-24 01:50 324阅读 0赞

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc5NzE4Mg_size_16_color_FFFFFF_t_70][] ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc5NzE4Mg_size_16_color_FFFFFF_t_70 1][]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    	<head>
    		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    		<title>鼠标移过，改变图片路径</title>
    		<style type="text/css">
    			body { 
    				background: #000000;
    			}
    
    			body,
    			ul,
    			li { 
    				padding: 0;
    				margin: 0;
    				list-style: none;
    				display: block;
    			}
    
    			#box { 
    				margin: 100px auto;
    				width: 230px;
    				height: 290px;
    				padding: 10px 0 0 10px;
    				background: white;
    				border-radius: 3px;
    			}
    
    			#box .first img { 
    				width: 160px;
    			}
    
    			#box li img { 
    				border-radius: 3px;
    			}
    
    			#box li { 
    				float: left;
    				margin: 5px 5px 0 0
    			}
    
    			#box li.first { 
    				position: relative;
    			}
    
    			#box li.first div { 
    				position: absolute;
    				top: 0;
    				left: 0;
    				width: 160px;
    				height: 160px;
    				display: none;
    				opacity: 0.5;
    				filter: alpha(opacity=50);
    				background: #fff url(img/loading.gif) 50% 50% no-repeat;
    			}
    		</style>
    		<script type="text/javascript">
    			window.onload = function() { 
    				var oImg = document.getElementById("img").getElementsByTagName("img");
    				var ofirstImg = document.getElementById("firstImg");
    				var oDiv = document.getElementsByTagName("div")[0];
    				for (var i = 0, item; item = oImg[i++];) { 
    					item.onmouseover = function() { 
    						// 将大图片的链接换成小图片的链接,以改变图片
    						ofirstImg.src = this.src;
    						//判断大图片是否加载成功
    						oDiv.style.display = "block";
    						//ofirstImg.complete?alert("图片加载成功"):alert("图片加载失败")
    						ofirstImg.complete ? oDiv.style.display = "none": (ofirstImg.onload = function() { 
    							oDiv.style.display = "block";
    							alert("图片出现问题，大图片加载失败");
    						});
    
    					}
    				}
    			}
    		</script>
    
    	</head>
    	<body>
    		<ul id="box">
    			<li class="first"><img id="firstImg" src="img/big_1.jpg">
    				<div></div>
    			</li>
    			<div id="img"></div>
    			<script type="text/javascript">
    				var img = document.getElementById("img");
    				var str = "";
    				for (var i = 1; i < 12; i++) { 
    					str += '<li><a href="javascript:;"><img src="img/small_' + i + '.jpg"></a></li>';
    				}
    				img.innerHTML = str;
    			</script>
    			
    		</ul>
    	</body>
    </html>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc5NzE4Mg_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20190727140840650.PNG?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc5NzE4Mg==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc5NzE4Mg_size_16_color_FFFFFF_t_70 1]: /images/20211122/684951ee4a4142118fd76e04e6c378f6.png