原生js实现图片懒加载

鸣_c

于 2020-07-13 00:49:52 发布

阅读量343

点赞数

本文链接：https://blog.csdn.net/C_755028787/article/details/107308684

版权

什么是图片懒加载？

当我们打开一个页面时，先只加载可视区内的图片，当用户向下拖动滚动条时再继续加载后面的图片（也是只加载目前可视窗口区域内的图片）。

为什么要用懒加载？

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

使用懒加载的优势：

这样减少了加载时的线程数量，使可视区域内的图片也能够快速加载，优化了用户体验。
减少了同一时间发向服务器的请求数，大大减轻了服务器的压力。

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