利用jQuery实现图片懒加载

原博客：https://www.jianshu.com/p/1b32e16ed0e5
<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>图片懒加载-简单</title>
    <script src="jquery.min.js"></script>
    <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="" data-src="img/1.jpg" /></a></li>
        <li><a href="#"><img src="" data-src="img/1.jpg" /></a></li>
        <li><a href="#"><img src="" data-src="img/1.jpg" /></a></li>
        <li><a href="#"><img src="" data-src="img/1.jpg" /></a></li>
        <li><a href="#"><img src="" data-src="img/1.jpg" /></a></li>
        <li><a href="#"><img src="" data-src="img/1.jpg" /></a></li>
        <li><a href="#"><img src="" data-src="img/1.jpg" /></a></li>
        <li><a href="#"><img src="" data-src="img/1.jpg" /></a></li>
        <li><a href="#"><img src="" data-src="img/1.jpg" /></a></li>
        <li><a href="#"><img src="" data-src="img/1.jpg" /></a></li>
        <li><a href="#"><img src="" data-src="img/1.jpg" /></a></li>
        <li><a href="#"><img src="" data-src="img/1.jpg" /></a></li>
        <li><a href="#"><img src="" data-src="img/1.jpg" /></a></li>
        <li><a href="#"><img src="" data-src="img/1.jpg" /></a></li>
        <li><a href="#"><img src="" data-src="img/1.jpg" /></a></li>
        <li><a href="#"><img src="" data-src="img/1.jpg" /></a></li>
    </ul>
    <script>
    // 先进行一次检查
    lazyRender();
    //为了不在滚轮滚动过程中就一直判定，设置个setTimeout,等停止滚动后再去判定是否出现在视野中。
    var clock; //这里的clock为timeID，
    $(window).on('scroll', function() {
        //        lazyRender();
        if (clock) { // 如果在300毫秒内进行scroll的话，都会被clearTimeout掉，setTimeout不会执行。
            //如果有300毫秒外的操作，会得到一个新的timeID即clock，会执行一次setTimeout,然后保存这次setTimeout的ID，
            //对于300毫秒内的scroll事件，不会生成新的timeID值，所以会一直被clearTimeout掉，不会执行setTimeout.
            clearTimeout(clock);
        }
        clock = setTimeout(function() {
            console.log('运行了一次');
            lazyRender();
        }, 300)
    })

        function lazyRender () {
        $('.container img').each(function () {
            if (checkShow($(this)) && !isLoaded($(this)) ){
                loadImg($(this));
            }
        })
    }

    function checkShow($img) { // 传入一个img的jq对象
        var scrollTop = $(window).scrollTop(); //即页面向上滚动的距离
        var windowHeight = $(window).height(); // 浏览器自身的高度
        var offsetTop = $img.offset().top; //目标标签img相对于document顶部的位置

        if (offsetTop < (scrollTop + windowHeight) && offsetTop > scrollTop) { //在2个临界状态之间的就为出现在视野中的
            return true;
        }
        return false;
    }

    function isLoaded($img) {
        return $img.attr('data-src') === $img.attr('src'); //如果data-src和src相等那么就是已经加载过了
    }

    function loadImg($img) {
        $img.attr('src', $img.attr('data-src')); // 加载就是把自定义属性中存放的真实的src地址赋给src属性
    }
    </script>
</body>

</html>
利用jQuery实现图片懒加载

猜你喜欢
