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

<!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>
			<!--    <li><a href="javascript:;"><img src="img/small_9.jpg"></a></li> -->
		</ul>
	</body>
</html>
posted @ 2022-04-02 09:48  coderwcb  阅读(156)  评论(0)  编辑  收藏  举报