JS预加载图片

最新推荐文章于 2024-09-05 11:49:00 发布

dianer5226

最新推荐文章于 2024-09-05 11:49:00 发布

阅读量84

点赞数

文章标签： xhtml javascript ViewUI

原文链接：http://www.cnblogs.com/mygood/articles/1489272.html

版权

<!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=gb2312" />
<title>JS图片预加载</title>
<style type="text/css">

</style>
</head>

<body>
<div class="big-img"><img id="showImg" width="500" height="375" src="" alt="" /></div>
<ul id="imgList">
<li><img src="http://www.codefans.net/jscss/demoimg/wall_s5.jpg" /></li>
<li><img src="http://www.codefans.net/jscss/demoimg/wall_s6.jpg" /></li>
<li><img src="http://www.codefans.net/jscss/demoimg/wall_s7.jpg" /></li>
</ul>
<script type="text/javascript">
var imgL=document.getElementById("imgList").getElementsByTagName("img");
var imgURL="http://www.codefans.net/jscss/demoimg/";
var bigImg=new Array("wall5.jpg","wall6.jpg","wall7.jpg");
var imgshow=new Image();
for (var i = 0; i < imgL.length; i++) {
(function() {
var p = i

         imgL[i].onclick = function() {
             document.getElementById("showImg").src = this.src;
             imgshow.src = imgURL + bigImg[p];
             imgshow.onload = function() {
                 document.getElementById("showImg").src = this.src;
             }
         }
     })()
}
</script>
</body>
</html>

Code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Onload image fades without Flash | clagnut/sandbox</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
#photoholder {
width:450px;
height:338px;
border:1px solid #666;
background:#fff url('http://www.cssrain.cn/demo/Onloadimage/indicator_web20_working.gif') 50% 50% no-repeat;
}
#thephoto {
width:450px;
height:338px;
}
TABLE {
margin-bottom:1em;
border-collapse:collapse;
}
TH {
font-weight:normal;
font-style:italic;
white-space:nowrap;
text-align:left;
}
TD, TH {
vertical-align:top;
padding:0.25em 0.5em;
border:1px solid #ddd;
}
</style>
<script type="text/javascript">

</script>
</head>
<body>

<p id="photoholder">
<img src="http://hrbimg.focus.cn/upload/photos/190392/8u2zUVxw.jpg" alt="Picturesque fishing village on Ithaka." id="thephoto" />
</p>

</body>
</html>

转载于:https://www.cnblogs.com/mygood/articles/1489272.html

dianer5226

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS预加载图片

<!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><met...
复制链接

扫一扫