图片延时加载

//js
<script> var imgs = document.getElementsByTagName("img"); function lazyload(){ var scrollTop = window.pageXOffset || document.documentElement.scrollTop || document.body.scrollTop; var viewportSize = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight; for(var i=0,len=imgs.length;i<len;i++){ var x = scrollTop + viewportSize - imgs[i].offsetTop; if(x>0){ imgs[i].src = imgs[i].getAttribute("data-src"); } } } setInterval(lazyload,1000); </script>

//jquery <script type="text/javascript"> $(function(){ var viewportSize = $(window).height(); var lazyload = function(){ var scrollTop = $(window).scrollTop(); $("img").each(function(){ var _this = $(this); var x = viewportSize + scrollTop - _this.offset().top; if(x>0){ _this.attr("src",_this.attr("data-src")); } }) } setInterval(lazyload,100); }) </script>


//改进

$(function(){
  function aa(){
    var winH = $(window).height();
    var scrollTop = $(window).scrollTop();
    $("img").each(function(){
      var imgTop = $(this).offset().top;
      if(imgTop<winH+scrollTop){
        $(this).attr("src",$(this).attr("data-src"));
      }
    })
  }
  aa();
  $(window).scroll(function(){
    setTimeout( aa,1000)
  });
})

原文地址:https://www.cnblogs.com/zjz666/p/11201175.html