码迷,mamicode.com
首页 > 其他好文 > 详细

图片延时加载

时间:2019-07-17 15:32:09      阅读:103      评论:0      收藏:0      [点我收藏+]

标签:data   inner   val   data-   element   fse   height   延时   color   

//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)
  });
})

 

图片延时加载

标签:data   inner   val   data-   element   fse   height   延时   color   

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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!