JQ来打造网站图片延迟载入效果

Jun 29

bearjia , 18:04 , JS无尽循环 , 评论(0) , 引用(0) , 阅读(1274) , Via 本站原创

一个拥有许多图片以及较多用户的网站，面临的压力会较大，并发连接数我们且略过。就拿下载图片时产生的带宽影响来说，就是一个很需要解决的问题。
所以，我们得做一个图片缓加载的功能。

用户打开网站的瞬间，浏览器显示区以外的图片，我们都暂时不去加载和显示，这个对SEO无害吧(我们肯定会选择一个小图片进行替换，不会空着的)。

这效果用JQ即可完美解决，虽然别的网站是自己写的类。

代码如下：

<!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>
<title>bearjia</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
</head>
<body>
默认显示区的图片<img src="x.jpg"/>
<div id="lazyBox" style="margin-top:100px;"> 延迟载入的图片 <img style="border:0;" class="lazyImg" alt="11.jpg" src="loading.gif" coords="_DAA"/> <img style="border:0;" class="lazyImg" alt="22.jpg" src="loading.gif" coords="_DBA"/> </div>
<div style="height:1000px;"> </div>
<script type="text/javascript">
      var hasShow = false;
      $(window).bind("scroll",function(){
          if(hasShow==true){
              $(window).unbind("scroll");
              return;
          }
          var t = $(document).scrollTop();
          if(t>100){
              // 滚动高度超过100时，加载图片
              hasShow = true;
              $("#lazyBox .lazyImg").each(function(){
                  $(this).attr("src",$(this).attr("alt"));
              });
          }
      });
  </script>
</body>
</html>

当然，我没去获取分辨率大小，这个以后实际用到再去做