zoukankan      html  css  js  c++  java
  • 图片延时加载

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

  • 相关阅读:
    线段树优化建图 && CF-786B.Legacy(优化建图,dijkstra)
    构建高性能JavaScript应用
    关于互联网应用前端架构的一些思考
    Router模块
    View模块
    Backbone源码解析系列
    Model模块
    Events模块
    Backbone源码风格
    jQuery选择器总结
  • 原文地址:https://www.cnblogs.com/zjz666/p/11201175.html
Copyright © 2011-2022 走看看