标签：node 可视 hasShowed window true 加载

懒加载的原理原理：先将img标签中的src链接设为同一张图片（空白图片），将其真正的图片地址存储再img标签的自定义属性中（比如data-src）。当js监听到该图片元素进入可视窗口时，即将自定义属性中的地址存储到src属性中，达到懒加载的效果。优点：这样做能防止页面一次性向服务器响应大量请求导致服务器响应慢，页面卡顿或崩溃等问题。代码实现既然懒加载的原理是基于判断元素是否出现在窗口可视范围内，首先我们写一个函数判断元素是否出现在可视范围内：

 

 

function isVisible($node){

 

    var winH = $(window).height(),scrollTop = $(window).scrollTop(),

        offSetTop = $(window).offSet().top;

    if (offSetTop < winH + scrollTop) {

 

        return true;

 

    } else {

        return false;

    }

}

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

 

 

$(window).on("scroll", function{

    if (isVisible($node)){

 

        console.log(true);

    }

})

我们已经很接近了，现在我们要做的是，让元素只在第一次被检查到时打印true，之后就不再打印了

 

 

var hasShowed = false;

$(window).on("sroll",function{

 

    if (hasShowed) {

        return;

    } else {

        if (isVisible($node)) {

            hasShowed = !hasShowed;

            console.log(true);

        }

 

    }

}))

标签：node,可视,hasShowed,window,true,加载
来源： https://www.cnblogs.com/moneyup/p/13636792.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。