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

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

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

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

     懒加载

      什么是懒加载

        懒加载其实就是延迟加载,是一种对网页性能优化的方式,比如当访问一个页面的时候,优先显示可视区域的图片而不一次性加载所有图片,当需要显示的时候再发送图片请求,避免打开网页时加载过多资源。

      什么时候用懒加载

        当页面中需要一次性载入很多图片的时候,往往都是需要用懒加载的。

      懒加载原理

        我们都知道HTML中的        标签是代表文档中的一个图像。。说了个废话。。

        标签有一个属性是src,用来表示图像的URL,当这个属性的值不为空时,浏览器就会根据这个值发送请求。如果没有src属性,就不会发送请求。

        嗯?貌似这点可以利用一下?

        我先不设置src,需要的时候再设置?

        nice,就是这样。

        我们先不给        设置src,把图片真正的URL放在另一个属性data-src中,在需要的时候也就是图片进入可视区域的之前,将URL取出放到src中。

    实现

HTML结构

image.png


        仔细观察一下,        标签此时是没有src属性的,只有altdata-src属性。

image.png

      如何判断元素是否在可视区域

        方法一

        网上看到好多这种方法,稍微记录一下。

      1. 通过document.documentElement.clientHeight获取屏幕可视窗口高度

      2. 通过element.offsetTop获取元素相对于文档顶部的距离

      3. 通过document.documentElement.scrollTop获取浏览器窗口顶部与文档顶部之间的距离,也就是滚动条滚动的距离

        然后判断②-③

        方法二(推荐)

        通过getBoundingClientRect()方法来获取元素的大小以及位置,MDN上是这样描述的:

The Element.getBoundingClientRect() method returns the size of an element and its position relative to the viewport.

        这个方法返回一个名为ClientRectDOMRect对象,包含了toprightbottonleftwidthheight这些值。

        MDN上有这样一张图:

1506043353461024.png

        可以看出返回的元素位置是相对于左上角而言的,而不是边距。

        我们思考一下,什么情况下图片进入可视区域。

        假设const bound = el.getBoundingClientRect();来表示图片到可视区域顶部距离;
        并设 const clientHeight = window.innerHeight;来表示可视区域的高度。

        随着滚动条的向下滚动,bound.top会越来越小,也就是图片到可视区域顶部的距离越来越小,当bound.top===clientHeight时,图片的上沿应该是位于可视区域下沿的位置的临界点,再滚动一点点,图片就会进入可视区域。

        也就是说,在bound.top时,图片是在可视区域内的。

        我们这样判断:

image.png

        这里有个+100是为了提前加载。

        经提醒。。这个方法性能

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

全部评分

此主贴暂时没有点赞评分

总计:0

回复分享

版主推荐

    共有1条评论

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

    • 标题:

    • 内容

    • 验证码:

    • 标题:

    • 内容

    • 选择版块:

    移动帖子x

    移动到: