jQuery实现图片懒加载的两种方法记录

记录一

整体思路：

设置个data-original(自定义一个属性)来存放真实地址
当滚动页面时，检查所有的img标签，看是否出现在视野中，如果已经出现在了视野中，那继续再进行判断，看其是否已经被加载过了，如果还没有被加载过，那就进行加载。

代码：

    lazyRender(); 
    var clock; //优化思路是当鼠标滚轮停止滚动的时候，再去判定是否存在在视野中，而不是滚动过程中一直触发。
    $(window).on('scroll',function () {//当页面滚动的时候绑定事件
        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();
        },200)
    })
    function lazyRender () {
        $('img.lazy-load').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-original') === $img.attr('src'); //如果data-src和src相等那么就是已经加载过了
    }
    function loadImg ($img) {
        $img.attr('src',$img.attr('data-original')); // 加载就是把自定义属性中存放的真实的src地址赋给src属性
    }

文章来源：https://www.jianshu.com/p/1b32e16ed0e5

记录二

引入插件：jquery.lazyload.js

$(function() {
     placeholder : "images/test.jpg",   // placeholder,待图片加载时,占位图则会隐藏
     effect: "fadeIn",  // effect(特效),值有show(直接显示),fadeIn(淡入),slideDown(下拉)等,常用fadeIn
     threshold: 200,  // threshold,值为数字,如设置为200,表示滚动条在离目标位置还有200的高度时就开始加载图片,
     event: 'click',   // event,加载图片条件，值有click(点击),mouseover(鼠标划过),sporty(运动的),scroll(默认滚动)
     container: $(".home"),  // container,值为某容器.lazyload默认在拉动浏览器滚动条时生效,拉动某DIV的滚动条时依次加载图片
     failurelimit : 10 // failurelimit,值为数字.lazyload默认在找到第一张不在可见区域里的图片时则不再继续加载,但当HTML容器混乱的时候可能出现可见区域内图片并没加载出来的情况,failurelimit意在加载N张可见区域外的图片,以避免出现这个问题.
});

jQuery实现图片懒加载的两种方法记录

记录一

记录二

猜你喜欢