zoukankan      html  css  js  c++  java
  • 图片延迟加载代码

    <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>

  • 相关阅读:
    SpringBoot详细研究-01基础
    JDK1.8快速入门
    海外酒店业务学习
    NOSQL快速入门
    移动前端技术快速入门
    Spring快速入门
    Java基础组件快速入门
    JavaWeb快速入门
    TLS 与 python thread local
    python 类修饰器
  • 原文地址:https://www.cnblogs.com/qianjilou/p/6698475.html
Copyright © 2011-2022 走看看