zoukankan      html  css  js  c++  java
  • JS实现图片懒加载demo

    <!DOCTYPE html>
    <html>
    <head>
        <script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.js"></script>
        <title>demo lazyload</title>
        <meta charset="utf-8">
        <style type="text/css">
            * {
                padding: 0;
                margin: 0;
                text-decoration: none;
                list-style: none;
            }
            .layout {
                margin: 0 auto;
                width: 1000px;
            }
            .lazyload img {
                width: 300px;
                height: 400px;
            }
            .img-ct {
                margin-left: -50px;
                overflow: auto;
            }
            .item {
                float: left;
                margin-left: 50px;
                margin-bottom: 30px;
            }
        </style>
    </head>
    <body>
    <div class="lazyload">
      <div class="layout">
        <ul class="img-ct">
            <li class="item">
                <a href="javascript:void(0)"><img data-img="1.png" src="default.png"></a>
            </li>
            <li class="item">
                <a href="javascript:void(0)"><img data-img="1.png" src="default.png"></a>
            </li>
            <li class="item">
                <a href="javascript:void(0)"><img data-img="1.png" src="default.png"></a>
            </li>
            <li class="item">
                <a href="javascript:void(0)"><img data-img="1.png" src="default.png"></a>
            </li>
            <li class="item">
                <a href="javascript:void(0)"><img data-img="2.png" src="default.png"></a>
            </li>
            <li class="item">
                <a href="javascript:void(0)"><img data-img="2.png" src="default.png"></a>
            </li>
            <li class="item">
                <a href="javascript:void(0)"><img data-img="2.png" src="default.png"></a>
            </li>
            <li class="item">
                <a href="javascript:void(0)"><img data-img="2.png" src="default.png"></a>
            </li>
            <li class="item">
                <a href="javascript:void(0)"><img data-img="2.png" src="default.png"></a>
            </li>
            <li class="item">
                <a href="javascript:void(0)"><img data-img="3.png" src="default.png"></a>
            </li>
            <li class="item">
                <a href="javascript:void(0)"><img data-img="3.png" src="default.png"></a>
            </li>
            <li class="item">
                <a href="javascript:void(0)"><img data-img="3.png" src="default.png"></a>
            </li>
            <li class="item">
                <a href="javascript:void(0)"><img data-img="3.png" src="default.png"></a>
            </li>
            <li class="item">
                <a href="javascript:void(0)"><img data-img="3.png" src="default.png"></a>
            </li>
        </ul>
      </div>
    </div>
    
    <script type="text/javascript">
    var lazyLoad = (function(){
        var clock;
        
        function init(){
            $(window).on("scroll", function(){
                if (clock) {
                    clearTimeout(clock);
                }
                clock = setTimeout(function(){
                    checkShow();
                }, 200);
            })
            checkShow();
        }
        
        function checkShow(){
            $(".lazyload img").each(function(){
                var $cur =$(this);
                if($cur.attr('isLoaded')){
                    return;
                }
                if(shouldShow($cur)){
                    showImg($cur);
                }
            })
        }
    
        function shouldShow($node){
            var scrollH = $(window).scrollTop(),
                winH = $(window).height(),
                top = $node.offset().top;
    
            if(top < winH + scrollH){
                return true;
            }else{
                return false;
            }
        }
    
        function showImg($node){
            $node.attr('src', $node.attr('data-img'));
            $node.attr('isLoaded', true);
        }
    
        return {
            init: init
        }
    })()
    
    lazyLoad.init();
    </script>
    </body>
    </html>
  • 相关阅读:
    游戏方案
    团队介绍
    【面向对象程序设计】作业四
    FIFO与LRU实现(Java)
    spring事务介绍
    微信抢红包算法
    Hibernate Dao映射配置通用接口类反射获取加载calass实例
    股票两次买卖最大收益(java)
    Eclipse安装JD-Eclipse反编译插件看源码
    Java GC调优
  • 原文地址:https://www.cnblogs.com/chenjiacheng/p/7232392.html
Copyright © 2011-2022 走看看