lazyload.html


<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.bootcss.com/jquery/1.12.0/jquery.min.js"></script>
<meta charset="utf-8">
<title>图片懒加载-简单</title>
<style>
    ul,li{
        list-style:none;
    }

    .container{
        width: 600px;
        margin: 0 auto;
    }

    .container li{
        float: left;
        margin: 10px 10px;
    }

    .container li img{
        width: 240px;
        height: 180px;
    }

    p{
        float: left;
    }
</style>
</head>
<body>
    <ul class="container">
        <li><a href="#"><img src="http://kejian.jirengu.com/data/fe/%E8%AF%BE%E4%BB%B6/32-%E6%87%92%E5%8A%A0%E8%BD%BD/code/blank.jpg" data-src="http://cdn.jirengu.com/book.jirengu.com/img/1.jpg" /></a></li>
        <li><a href="#"><img src="http://kejian.jirengu.com/data/fe/%E8%AF%BE%E4%BB%B6/32-%E6%87%92%E5%8A%A0%E8%BD%BD/code/blank.jpg" data-src="http://cdn.jirengu.com/book.jirengu.com/img/2.jpg" /></a></li>
        <li><a href="#"><img src="http://kejian.jirengu.com/data/fe/%E8%AF%BE%E4%BB%B6/32-%E6%87%92%E5%8A%A0%E8%BD%BD/code/blank.jpg" data-src="http://cdn.jirengu.com/book.jirengu.com/img/3.jpg" /></a></li>
        <li><a href="#"><img src="http://kejian.jirengu.com/data/fe/%E8%AF%BE%E4%BB%B6/32-%E6%87%92%E5%8A%A0%E8%BD%BD/code/blank.jpg" data-src="http://cdn.jirengu.com/book.jirengu.com/img/4.jpg" /></a></li>
        <li><a href="#"><img src="http://kejian.jirengu.com/data/fe/%E8%AF%BE%E4%BB%B6/32-%E6%87%92%E5%8A%A0%E8%BD%BD/code/blank.jpg" data-src="http://cdn.jirengu.com/book.jirengu.com/img/5.jpg" /></a></li>
        <li><a href="#"><img src="http://kejian.jirengu.com/data/fe/%E8%AF%BE%E4%BB%B6/32-%E6%87%92%E5%8A%A0%E8%BD%BD/code/blank.jpg" data-src="http://cdn.jirengu.com/book.jirengu.com/img/6.jpg" /></a></li>
        <li><a href="#"><img src="http://kejian.jirengu.com/data/fe/%E8%AF%BE%E4%BB%B6/32-%E6%87%92%E5%8A%A0%E8%BD%BD/code/blank.jpg" data-src="http://cdn.jirengu.com/book.jirengu.com/img/7.jpg" /></a></li>
        <li><a href="#"><img src="http://kejian.jirengu.com/data/fe/%E8%AF%BE%E4%BB%B6/32-%E6%87%92%E5%8A%A0%E8%BD%BD/code/blank.jpg" data-src="http://cdn.jirengu.com/book.jirengu.com/img/8.jpg" /></a></li>
        <li><a href="#"><img src="http://kejian.jirengu.com/data/fe/%E8%AF%BE%E4%BB%B6/32-%E6%87%92%E5%8A%A0%E8%BD%BD/code/blank.jpg" data-src="http://cdn.jirengu.com/book.jirengu.com/img/9.jpg" /></a></li>
        <li><a href="#"><img src="http://kejian.jirengu.com/data/fe/%E8%AF%BE%E4%BB%B6/32-%E6%87%92%E5%8A%A0%E8%BD%BD/code/blank.jpg" data-src="http://cdn.jirengu.com/book.jirengu.com/img/10.jpg" /></a></li>
        <li><a href="#"><img src="http://kejian.jirengu.com/data/fe/%E8%AF%BE%E4%BB%B6/32-%E6%87%92%E5%8A%A0%E8%BD%BD/code/blank.jpg" data-src="http://cdn.jirengu.com/book.jirengu.com/img/11.jpg" /></a></li>
        <li><a href="#"><img src="http://kejian.jirengu.com/data/fe/%E8%AF%BE%E4%BB%B6/32-%E6%87%92%E5%8A%A0%E8%BD%BD/code/blank.jpg" data-src="http://cdn.jirengu.com/book.jirengu.com/img/12.jpg" /></a></li>
        <li><a href="#"><img src="http://kejian.jirengu.com/data/fe/%E8%AF%BE%E4%BB%B6/32-%E6%87%92%E5%8A%A0%E8%BD%BD/code/blank.jpg" data-src="http://cdn.jirengu.com/book.jirengu.com/img/13.jpg" /></a></li>
        <li><a href="#"><img src="http://kejian.jirengu.com/data/fe/%E8%AF%BE%E4%BB%B6/32-%E6%87%92%E5%8A%A0%E8%BD%BD/code/blank.jpg" data-src="http://cdn.jirengu.com/book.jirengu.com/img/14.jpg" /></a></li>
        <li><a href="#"><img src="http://kejian.jirengu.com/data/fe/%E8%AF%BE%E4%BB%B6/32-%E6%87%92%E5%8A%A0%E8%BD%BD/code/blank.jpg" data-src="http://cdn.jirengu.com/book.jirengu.com/img/15.jpg" /></a></li>
        <li><a href="#"><img src="http://kejian.jirengu.com/data/fe/%E8%AF%BE%E4%BB%B6/32-%E6%87%92%E5%8A%A0%E8%BD%BD/code/blank.jpg" data-src="http://cdn.jirengu.com/book.jirengu.com/img/16.jpg" /></a></li>
    </ul>

    <script type="text/javascript">

    /*
    1. 对于所有的 img 标签，把真实的地址放入自定义属性data-img
    2. 当滚动页面时，检查页面所有的 img 标签，看看这个标签是否出现到我们的视野，当出现在我们的视野时，再去判断它是否已经加载过，如果没有加载过，加载它
    */


    lazyRender()    //加载视野中的图片，保证打开页面的时候有图片显示。

    var clock

    $(window).on('scroll', function(){  //鼠标滚轮事件。
        if(clock){
            clearTimeout(clock)
        }
        clock = setTimeout(function(){    //提高性能。
            console.log('hello')
            lazyRender()    //加载视野中的图片。
        }, 100)
    })

    function lazyRender(){
        $('.container img').each(function(){  //遍历所有图片
            if( checkShow($(this)) && !isLoaded($(this)) ){ //出现在视野的和未加载的图片
                loadImg($(this))  //执行加载图片
            }
        }) 
    }

    function checkShow($img){  //检查是否出现在视野中
        var scrollTop = $(window).scrollTop() //窗口滚动距离
        var windowHeight = $(window).height() //窗口高度
        var offsetTop = $img.offset().top //元素距离document头部的距离
        if(offsetTop < scrollTop + windowHeight && offsetTop > scrollTop) {
            return true
        }
        return false
    }

    function isLoaded($img){   //是否已经加载过图片
        return $img.attr('data-src') === $img.attr('src')
    }

    function loadImg($img){ //加载图片
        $img.attr('src', $img.attr('data-src'))
    }


    /*
    var clock;
        $(window).on('scroll', function(){

        //用户鼠标滚轮滚动一次，有多次事件响应。下面的 setTimeout 主要是为性能考虑，只在最后一次事件响应的时候执行 checkshow
        if(clock){
        clearTimeout(clock);
        }
        clock = setTimeout(function(){
        console.log(1);
        checkShow();
        }, 300);

        });

    // 用户第一次打开页面，还未滚动窗口的时候需要执行一次 checkShow
        checkShow();

        function checkShow(){
            $('.container img').each(function(){
                var $cur = $(this);
        if($cur.attr('isLoaded')){
            return;
        }

                if(isShow($cur)){
                        showImg($cur);
                }
            });
        }

        function isShow($el){
        var scrollH = $(window).scrollTop(),
            winH = $(window).height(),
            top = $el.offset().top;

        if(top < winH + scrollH){
            return true;
        }else{
            return false;
        }
        }

        function showImg($el){
        $el.attr('src', $el.attr('data-src'));
        $el.attr('isLoaded', true);
        }
    */
    </script>

</body>
</html>