文章摘要
白衣 DeepSeek

前言

网上搜了搜图片懒加载，发现很是繁琐，自己研究了一阵子，发现一个data-src就能搞定的事情，没必要像网上说的那么复杂。

一.适用于img标签

1.构建占位符

1
2
<!--这个适用于img的src标签，如果是背景图片的URL，移步第二种-->
<img class="lazyload" data-src="图片的真实地址" src="loading.gif" alt="">

这里data-src是真实地址，src相当于一个加载gif的占位符，src地址需要填写你的加载占位符地址。

2.JS滑动监听

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
window.addEventListener('DOMContentLoaded', function() {
    var lazyImages = document.querySelectorAll('img[data-src]');
    
    function lazyLoad() {
        for (var i = 0; i < lazyImages.length; i++) {
            if (lazyImages[i].getBoundingClientRect().top <= window.innerHeight && lazyImages[i].getAttribute('data-src')) {
                lazyImages[i].src = lazyImages[i].getAttribute('data-src');
                lazyImages[i].removeAttribute('data-src');
            }
        }
    }
    
    // 监听滚动事件
    window.addEventListener('scroll', lazyLoad);
    // 或者可以监听其他事件，例如鼠标滚动
    // window.addEventListener('mousewheel', lazyLoad);
    
    // 页面加载完成后立即执行一次图片懒加载
    lazyLoad();
});

JS代码放进页脚位置。上述代码适用于img标签的，如果你想将这个功能应用到背景图片的懒加载，需要对代码进行一些调整，比如选择带有data-bg属性的元素，并设置其backgroundImage属性

二.适用于background

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF - 8">
    <meta name="viewport" content="width=device - width, initial - scale = 1.0">
    <title>Document</title>
</head>

<body>
    <a class="media-content" title="标题" href="链接" data-bg="图片真实地址" style='background-image:url("loading.gif");'></a>
    <script>
        window.addEventListener('DOMContentLoaded', function () {
            var lazyBackgrounds = document.querySelectorAll('.media-content[data-bg]');
            function lazyLoad() {
                for (var i = 0; i < lazyBackgrounds.length; i++) {
                    if (lazyBackgrounds[i].getBoundingClientRect().top <= window.innerHeight && lazyBackgrounds[i].getAttribute('data-bg')) {
                        var bgUrl = lazyBackgrounds[i].getAttribute('data-bg');
                        lazyBackgrounds[i].style.backgroundImage = 'url(' + bgUrl + ')';
                        lazyBackgrounds[i].removeAttribute('data-bg');
                    }
                }
            }
            window.addEventListener('scroll', lazyLoad);
            lazyLoad();
        });
    </script>
</body>
</html>