图片预加载模糊变清晰效果代码,JS代码库,德仔网

代码语言

代码分类

【JS】图片预加载模糊变清晰效果

作者:dezai / 发布于2013/12/17/ 482

为了减轻网页的压力，先显示图片的缩略图，当点击该缩略图的时候再慢慢加载大图，你就会看到一个图片由模糊突然变得清淅起来，这就是预加载的一种。

<!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" />
<base href="http://www.newxing.com/" />
<title>JS图片预加载</title>
<style type="text/css">
<!--
body{background:#000; color:#FFFFFF; }
.big-img{height: 390px; text-align:center; }
ol,ul{list-style:none}
ul{width: 632px; height: 56px; margin:10px auto; }
li{float:left; width: 200px; height: 53px; margin-right:10px; }
ul li img{ cursor:pointer}
-->
</style>
</head>
<body>
<div class="big-img"><img id="showImg" width="500" height="375" src="" /></div>
<ul id="imgList">
<li><img src="/img/120/1.gif" /></li>
<li><img src="/img/120/2.gif" /></li>
<li><img src="/img/120/3.gif" /></li>
</ul>
<script type="text/javascript">
  var imgL=document.getElementById("imgList").getElementsByTagName("img");
  var imgURL="/img/800/";
  var bigImg=new Array("1.jpg","2.jpg","3.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>

评论列表

本站所提供的代码，版权归原作者所有，若有侵犯作者版权，请与我们联系，我们将立即删除或修改。谢谢!
本站所有代码发布及提供者。

试试其它关键字

　模糊变清晰　

同语言下

可能有用的

dezai贡献的其它代码(1065)