面向对象之懒加载

作者: 李永州的FE | 来源:发表于2017-06-26 13:29 被阅读0次

面向对象之懒加载
iOS 懒加载
swift的
Swift - 懒加载的实现
ios懒加载
懒加载学习记录
React项目中组件懒加载的四种方式
Web 体验优化中和图有关的那些事
懒加载
2018-12-21

<html><head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta charset="utf-8">
    <title>图片懒加载-简单</title>
    <style type="text/css">
        ul,li{
            list-style:none;
        }
        .container{
            max-width: 800px;
            margin: 0 auto;
        }
        .container:after{
            content: '';
            display: block;
            clear: both;
        }
        .container li{
            float: left;
            margin: 10px 10px;
        }
        .container li img{
            width: 380px;
            height: 380px;
        }
        p{
            float: left;
        }
    </style>

</head>
<body>
<ul class="container">
    <li><a href="#">![](https://img.haomeiwen.com/i6100377/17d540f700281321.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)</a></li>
    <li><a href="#">![](https://img.haomeiwen.com/i6100377/17d540f700281321.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)</a></li>
    <li><a href="#">![](https://img.haomeiwen.com/i6100377/778bea58c7540723.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)</a></li>
    <li><a href="#">![](https://img.haomeiwen.com/i6100377/91748a6a3420eaa9.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)</a></li>
    <li><a href="#">![](https://img.haomeiwen.com/i6100377/631ccd984f22e81a.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)</a></li>
    <li><a href="#">![](https://img.haomeiwen.com/i6100377/883186c9850d7156.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)</a></li>
    <li><a href="#">![](https://img.haomeiwen.com/i6100377/3193fdb1b08f021f.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)</a></li>
    <li><a href="#">![](https://img.haomeiwen.com/i6100377/77c34358685f6464.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)</a></li>
    <li><a href="#">![](https://img.haomeiwen.com/i6100377/7e9ca9241d0ff975.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)</a></li>
    <li><a href="#">![](https://img.haomeiwen.com/i6100377/9dfb0f710da5690b.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)</a></li>
    <li><a href="#"><img src="" data-src="http://cdn.jirengu.com/book.jirengu.com/img/10.jpg"></a></li>
    <li><a href="#"><img src="" data-src="http://cdn.jirengu.com/book.jirengu.com/img/11.jpg"></a></li>
    <li><a href="#"><img src="" data-src="http://cdn.jirengu.com/book.jirengu.com/img/12.jpg"></a></li>
    <li><a href="#"><img src="" data-src="http://cdn.jirengu.com/book.jirengu.com/img/13.jpg"></a></li>
    <li><a href="#"><img src="" data-src="http://cdn.jirengu.com/book.jirengu.com/img/14.jpg"></a></li>
    <li><a href="#"><img src="" data-src="http://cdn.jirengu.com/book.jirengu.com/img/15.jpg"></a></li>
    <li><a href="#"><img src="" data-src="http://cdn.jirengu.com/book.jirengu.com/img/16.jpg"></a></li><li><a href="#">
    <img src="" data-src="http://cdn.jirengu.com/book.jirengu.com/img/17.jpg"></a></li>
    <!-- <p id="hello">hello</p>
    <p id="world">world</p> -->

</ul>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js"></script>
<script type="text/javascript">
    function Exposure($target,callback){
        this.$target = $target;
        this.callback = callback;
        this.bind();
        this.check();
    }

    Exposure.prototype.bind = function(){
        var _this = this;
        $(window).on('scroll',function(){
            _this.check();
        })
    };
    Exposure.prototype.check = function(){
        if(this.isShow(this.$target)){
            this.callback(this.$target);
        }
    };
    Exposure.prototype.isShow = function(){
        var windowHeight = $(window).height(),
                scrollTop = $(window).scrollTop(),
                offsetTop = this.$target.offset().top,
                nodeHeight = this.$target.height();
        if(windowHeight + scrollTop > offsetTop && scrollTop < nodeHeight + offsetTop){
            return true;
        }else {
            return false;
        }
    };
    var Lazy = (function(){
        return {
            init:function($targets,callback){
                $targets.each(function(idx,target){
                    new Exposure($(target),callback);
                })
            },
            one:function($targets,callback){

            }
        }
    })();
    Lazy.init($('.container img'),function($node){
        showImg($node);
    });
    function showImg($img){
        var imgUrl = $img.attr('data-src');
        $img.attr('src',imgUrl);
    }
</script>



</body></html>