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

  • 相关阅读:
    Boostrap响应式与非响应式
    Linux文件处理命令
    Linux各目录作用
    linux系统安装
    并发编程之基础( 五)
    Extjs自定义验证介绍
    javascrict中innerhtml和innerText的关系
    List泛型的应用
    winform项目改项目名称
    math.random用法
  • 原文地址:https://www.cnblogs.com/zjz666/p/11201175.html
Copyright © 2011-2022 走看看