jquery的懒加载的原理及实现

这次给大家带来jquery的懒加载的原理及实现，实现jquery的懒加载注意事项有哪些，下面就是实战案例，一起来看一下。

懒加载的原理

1、代码实现，加载到当前视口：

function isVisible($node){    var winH = $(window).height(),
        scrollTop = $(window).scrollTop(),
        offSetTop = $(window).offSet().top;    if (offSetTop < winH + scrollTop) {        return true;
    } else {        return false;
    }
}

2、再添加上浏览器的事件监听函数，让浏览器每次滚动就检查元素是否出现在窗口可视范围内：

$(window).on("scroll", function{    if (isVisible($node)){        console.log(true);
    }
})

3、加油吧，皮卡丘！

var hasShowed = false;
$(window).on("sroll",function{    if (hasShowed) {        return;
    } else {        if (isVisible($node)) {
            hasShowed = !hasShowed;            console.log(true);            //ajax请求刷新view层
        }
    }
})

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

相关阅读：

VUE-CLI @2.9.1以后版本的问题

WebStorm怎么自定义用户设置

以上是jquery的懒加载的原理及实现的详细内容。更多信息请关注PHP中文网其他相关文章！