图片延迟加载代码

 

<script type="text/javascript">
//图片随着滚动条的滑动而加载  代码开始*******
    //使用，将需要延迟加载的图片的src属性修改为data-src，然后给需要延迟加载的图片加上delay这个css类
   $(function(){
  var $winH = $(window).height();
  var $img = $("img.delay");
  var $imgH = parseInt($img.height()/2);
  var $srcDef = "load.gif";
  runing();
  $(window).scroll(function(){
   runing();
  })
  function runing(){
   $img.each(function(i){
    var $src = $img.eq(i).attr("data-src");
    var $scroTop = $img.eq(i).offset();
    if($scroTop.top + $imgH >= $(window).scrollTop() && $(window).scrollTop() + $winH >= $scroTop.top + $imgH)
    {
     if($img.eq(i).attr("src") == $srcDef){
      $img.eq(i).hide();
     }
     $img.eq(i).attr("src",function(){return $src}).fadeIn(300);
    }
   })
  }
 })
</script>

 

<img class="delay" data-src="../image/20161203/20161203115227_7928.jpg" src="./images/logo.gif" alt="工程案例" title="工程案例" /></a>

转载于:https://www.cnblogs.com/qianjilou/p/6698475.html