zoukankan      html  css  js  c++  java
  • 懒加载

    <body>
    <div class="wrapper">
    <img src="img/bg_2_01.jpg" alt="images1" data-src="img/bg_2_01.jpg">
    <img src="img/bg_2_02.jpg" alt="images2" data-src="img/bg_2_02.jpg">
    <img src="img/gif.png" alt="images3" data-src="img/bg_2_03.jpg">
    <img src="img/gif.png" alt="images4" data-src="img/bg_2_04.jpg">
    <img src="img/gif.png" alt="images5" data-src="img/bg_2_05.jpg">
    <img src="img/gif.png" alt="images6" data-src="img/bg_2_06.jpg">
    <img src="img/gif.png" alt="images7" data-src="img/bg_2_07.jpg">

    <img src="img/gif.png" alt="images8" data-src="img/bg_2_08.jpg">
    <a href="tel:400-799-5511">
    <img class="tell_phone" src="img/gif.png" alt="images_btn1" data-src="img/btn2_03.png" ></a>
    <a href="http://wx.guangguang.net.cn/fdmall/index.php">
    <img class="buy_btn" src="img/gif.png" alt="images_btn2" data-src="img/btn_06.png" >
    </a>

    </div>
    <script type="text/javascript" src="js/libs/jquery-3.1.0.min.js"></script>
    <script type="text/javascript">

    (function(){
    'use strict';
    var $window = $(window);
    var $document = $(document);
    var $img = $('img');
    var imgLength = $('img').length;
    var self = $(this);
    var imgSrc = 'img/gif.png';
    var lazyload = {
    init:function(){
    this.bind()
    },
    bind:function() {
    var change = 1;
    var imgObj= new Image();
    $window.scroll(function(){
    if (change==2) return ;
    var $winScrollTop = parseInt($window.scrollTop(),10) ;
    var $winHeight = parseInt($window.height(),10);
    $img.each(function(a,n){
    if($img.eq(a).offset().top < ($winScrollTop + $winHeight ) ){
    if($img.eq(a).attr('src') == imgSrc ){
    var data_src = $img.eq(a).attr('data-src');
    $img.eq(a).attr('src',data_src);
    }
    }
    })
    })
    function imgOnload(){
    for (var i=0;i<imgLength;){
    if($img[i].complete && $img.eq(i).attr('src')!=imgSrc){
    i++;
    }else{
    $img[i].src=$img.eq(i).attr('data-src');
    i++;
    }
    }
    change=2;

    }
    setTimeout(imgOnload,500)
    }

    }
    lazyload.init();
    })()


    </script>

    </body>

  • 相关阅读:
    【NOIP2007】守望者的逃离
    20200321(ABC)题解 by 马鸿儒 孙晨曦
    20200320(ABC)题解 by 王一帆
    20200319(ABC)题解 by 王一帆 梁延杰 丁智辰
    20200314(ABC)题解 by 董国梁 蒋丽君 章思航
    20200309(ABC)题解 by 梁延杰
    20200307(DEF)题解 by 孙晨曦
    20200306(ABC)题解 by 孙晨曦
    20200305(DEF)题解 by 孙晨曦
    20200303(ABC)题解 by 王锐,董国梁
  • 原文地址:https://www.cnblogs.com/tanks/p/6780761.html
Copyright © 2011-2022 走看看