扫描二维码,下载安卓APP
下载安卓APP箭头
客服QQ
箭头给我发消息

客服QQ:2698585038
论坛 >编程语言 >原生 JS 实现最简单的图片懒加载(二)

原生 JS 实现最简单的图片懒加载(二)

课课家iOS游客发布于 2017-09-22 09:29查看:8484回复:1

      加载图片

        页面打开时需要对所有图片进行检查,是否在可视区域内,如果是就加载。

image.png

        这里应该是有一个优化的地方,设一个标识符标识已经加载图片的index,当滚动条滚动时就不需要遍历所有的图片,只需要遍历未加载的图片即可。

     函数节流

        在类似于滚动条滚动等频繁的DOM操作时,总会提到“函数节流、函数去抖”。

        所谓的函数节流,也就是让一个函数不要执行的太频繁,减少一些过快的调用来节流。

        基本步骤:

        1. 获取第一次触发事件的时间戳

        2. 获取第二次触发事件的时间戳

        3. 时间差如果大于某个阈值就执行事件,然后重置第一个时间

image.png

        这里的mustRun就是调用函数的时间间隔,无论多么频繁的调用fn,只有remaining>=mustRunfn才能被执行。

     实验

    页面打开时

1506043665657665.png

        可以看出此时仅仅是加载了img1和img2,其它的img都没发送请求,看看此时的浏览器

1506043695291938.png

        第一张图片是完整的呈现了,第二张图片刚进入可视区域,后面的就看不到了~

      页面滚动时

        当我向下滚动,此时浏览器是这样

1506043729300477.png        此时第二张图片完全显示了,而第三张图片显示了一点点,这时候我们看看请求情况

1506043753413692.png

        img3的请求发出来,而后面的请求还是没发出~

      全部载入时

        当滚动条滚到最底下时,全部请求都应该是发出的,如图

1506043783131000.png

收藏(0)0
查看评分情况

全部评分

此主贴暂时没有点赞评分

总计:0

回复分享

版主推荐

    共有1条评论

    • 课课家运营团队
    • Mr ken
    • YUI
    • cappuccino
    • mr jack
    • IT宅男
    • Mright
    • 选择版块:

    • 标题:

    • 内容

    • 验证码:

    • 标题:

    • 内容

    • 选择版块:

    移动帖子x

    移动到: