图片懒加载及实现方式，懒加载的优点

最新推荐文章于 2023-06-11 10:30:51 发布

m0_51530332

最新推荐文章于 2023-06-11 10:30:51 发布

阅读量1.4k

点赞数

本文链接：https://blog.csdn.net/m0_51530332/article/details/117202760

版权

懒加载的概念：

当我们打开某一个页面时，先只加载浏览器可视区内的图片，当用户向下拖动滚动条时再继续加载后面的图片（也是只加载目前可视窗口区域内的图片，这里毫无疑问要用到鼠标滚轮的事件监听）。

why要用懒加载?

当我们打开一个页面时，浏览器就会从上往下读取页面中的标签src中的地址，并且开启线程来进行加载。
倘若用户的网速不给力或者此页面中的图片太多时，就会发生每张图片都加载了一点但是都没有加载完成，导致最后没有一个图片能正常显示。一方面让用户的体验非常之差，另一方面，加载每个图片都要向服务器发送请求，这会增大服务器的压力。

实现思路：
在写标签时，先将src的值设为一个体积很小的默认图片，自定义一个data-src属性，存储真正要显示的图片的路径。在加载页面时，一开始是默认图片，当在可视区中时，将data-src里存储的真正路径赋值给src属性，并开始加载。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">

	</style>
</head>
<body>
	<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="UTF-8">
        <title>页面懒加载</title>
        <style>
            img {
                display: block;
                margin: 0 auto 50px;
                width: 660px;
                height: 740px;
            }
        </style>
    </head>
    <body>
        <img src="default.jpg" data-src="https://hbimg.huabanimg.com/857ca2ac0047298f0109b8b488f0a1d29240a07c20ce3-tFcPfR_fw658" alt="">
        <img src="default.jpg" data-src="http://hbimg.huabanimg.com/3561adae57a54d4ce4fac879175e72f4451c06ffa405-ta2Ull_fw658" alt="">
        <img src="default.jpg" data-src="http://n.sinaimg.cn/games/crawl/20160801/XoMQ-fxunyyf6357658.png" alt="">
        <img src="default.jpg" data-src="http://p0.qhimg.com/t0158d9ce33986f6090.jpg" alt="">
        <img src="default.jpg" data-src="https://i0.hdslb.com/bfs/article/ace350b1a3a38db7fce60aa9699c4c056ee80638.jpg" alt="">
        <img src="default.jpg" data-src="http://img.hb.aicdn.com/c2c5ca7d736724df7556b0f188fe21baa3712c3d2b895-iNMmnu_fw658" alt="">
        <img src="default.jpg" data-src="http://5b0988e595225.cdn.sohucs.com/images/20190613/c07709f355bb4f7aba5dec61ff88a7c4.JPG" alt="">
        <img src="default.jpg" data-src="https://c-ssl.duitang.com/uploads/item/201808/01/20180801083850_juzen.thumb.400_0.jpg" alt="">
        <img src="default.jpg" data-src="http://img.qqzhi.com/uploads/2018-11-29/235955672.jpg" alt="">
        <img src="default.jpg" data-src="http://i.serengeseba.com/uploads/i_2_77599483x4251285803_26.jpg" alt="">
        <img src="default.jpg" data-src="http://img.hb.aicdn.com/09ae7fb96159a07cc4f993c166dcf9c546818c3047a41-Fm6Wgt_fw236" alt="">
        <img src="default.jpg" data-src="https://p1.ssl.qhimgs1.com/sdr/400__/t01ec96c4bb1b4e380b.webp" alt="">        
        <img src="default.jpg" data-src="https://p1.ssl.qhimgs1.com/sdr/400__/t01ec96c4bb1b4e380b.webp" alt="">
        <img src="default.jpg" data-src="https://5b0988e595225.cdn.sohucs.com/q_70,c_zoom,w_640/images/20170903/5ee461b1464b492fb5b033b34d06adcb.jpeg" alt="">
        <img src="default.jpg" data-src="https://p2.ssl.qhimgs1.com/sdr/400__/t0106ff1c580238fa02.webp" alt="">
        <img src="default.jpg" data-src="https://p0.ssl.qhimgs1.com/sdr/400__/t01a834ab8bd0a890c6.webp" alt="">
        <img src="default.jpg" data-src="https://p0.ssl.qhimgs1.com/sdr/400__/t01ba9ad7091a098934.webp" alt="">
        <img src="default.jpg" data-src="https://p1.ssl.qhimgs1.com/sdr/400__/t01b6689727e2c7470b.webp" alt="">
    </body>
    <script>
        var num = document.getElementsByTagName('img').length;
        var img = document.getElementsByTagName("img");
        // 存储图片加载到的位置，避免每次都从第一张图片开始遍历
        var n = 0;
        // 页面载入完毕加载可视区域内的图片
        lazyload();                                
        window.onscroll = lazyload;
        // 监听页面滚动事件
        function lazyload() {
            // 可见区域高度
            var seeHeight = document.documentElement.clientHeight;
            // 滚动条距离顶部高度
            var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
            for (var i = n; i < num; i++) {
                if (img[i].offsetTop < seeHeight + scrollTop) {
                    if (img[i].getAttribute("src") == "default.jpg") {
                        img[i].src = img[i].getAttribute("data-src");
                    }
                    n = i + 1;
                }
            }
        }
    </script>
</html>
</body>
</html>

// 可见区域高度
var seeHeight = document.documentElement.clientHeight;
console.log(seeHeight)

运行效果：
在这里插入图片描述

// 滚动条距离顶部高度
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
console.log(scrollTop)

运行效果：
在这里插入图片描述

var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;

上面的这段代码，|| 是为了做一个不同浏览器运行下的兼容处理。

来都来了再详细了解一下:
1.各浏览器下 scrollTop的差异:
IE6/7/8：
可以使用 document.documentElement.scrollTop；
IE9及以上：
可以使用window.pageYOffset或者document.documentElement.scrollTop
Safari:
safari： window.pageYOffset 与document.body.scrollTop都可以；
Firefox:
火狐等等相对标准些的浏览器就省心多了，直接用window.pageYOffset 或者 document.documentElement.scrollTop
Chrome：
谷歌浏览器只认识document.body.scrollTop;
注：标准浏览器是只认识documentElement.scrollTop的，但chrome虽然我感觉比firefox还标准，但却不认识这个，在有文档声明时，chrome也只认识document.body.scrollTop.

 for (var i = n; i < num; i++) {
            if (img[i].offsetTop < seeHeight + scrollTop) {
                    if (img[i].getAttribute("src") == "default.jpg") {
                        img[i].src = img[i].getAttribute("data-src");
                    }
                    n = i + 1;
                }
            }

offsetTop:当前对象到其上级层顶部的距离。
scrollTop:对象的最顶部到对象在当前窗口显示的范围内的顶边的距离
getAttribute() :方法返回指定属性名的属性值。

懒加载在面试中也会被经常问到？
比如让你解释下他的概念，以及优点。
概念在后面就不多赘述了，根据上面的来进行一个优点的总结。
1.减少了加载时的线程数量，使可视区域内的图片也能够快速加载，优化了用户体验。
2.减少了同一时间发向服务器的请求数，大大减轻了服务器的压力。

m0_51530332

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
图片懒加载及实现方式，懒加载的优点

懒加载的概念：当我们打开某一个页面时，先只加载浏览器可视区内的图片，当用户向下拖动滚动条时再继续加载后面的图片（也是只加载目前可视窗口区域内的图片，这里毫无疑问要用到鼠标滚轮的事件监听）。why要用懒加载?当我们打开一个页面时，浏览器就会从上往下读取页面中的标签src中的地址，并且开启线程来进行加载。倘若用户的网速不给力或者此页面中的图片太多时，就会发生每张图片都加载了一点但是都没有加载完成，导致最后没有一个图片能正常显示。一方面让用户的体验非常之差，另一方面，加载每个图片都要向服务器发送请求，这会
复制链接

扫一扫