发表于: 2017-04-29 23:35:00

1 956


今天完成的事情/收获:

我的页面渲染请求在某一天达到了15秒- =也许是网速炸了的原因? 

我还是看了下懒加载的一些东西

懒加载的原理

原理:先将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)) {

            console.log(true);

        }

    }

})

明天做的事情 完善任务 9开始任务10

以及师兄告诉我的

懒加载就是在需要的时候再加载那些js文件,不像平时那样一次性在html里链接进去,在任务和复盘项目这样的小项目里不是必要的明天计划的事情:
遇到的问题: 今天看了下理论知识 没什么太大的问题


返回列表 返回列表
评论

    分享到