js实现图片延迟加载

基础概念

图片延迟加载（Lazy Loading）是一种优化网页性能的技术，它通过延迟加载页面上非关键资源（如图片），直到这些资源即将进入用户的视野范围。这样可以减少初始页面加载时间，提高用户体验。

类型

基于时间的延迟加载：设置一个时间阈值，超过该时间后再加载图片。
基于可视区域的延迟加载：当图片进入用户可视区域时才加载。

应用场景

电商网站：产品列表页有很多图片，使用延迟加载可以提高首屏加载速度。
社交媒体：动态页面包含大量用户上传的图片。
新闻网站：文章列表页有很多缩略图。

实现方法

以下是一个基于可视区域的JavaScript实现示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Lazy Load Images</title>
    <style>
        img {
            width: 100%;
            height: auto;
            display: block;
            margin-bottom: 10px;
        }
    </style>
</head>
<body>
    <div id="image-container">
        <!-- 图片占位符 -->
        <img src="placeholder.jpg" data-src="real-image1.jpg" alt="Image 1">
        <img src="placeholder.jpg" data-src="real-image2.jpg" alt="Image 2">
        <img src="placeholder.jpg" data-src="real-image3.jpg" alt="Image 3">
        <!-- 更多图片... -->
    </div>

    <script>
        function lazyLoadImages() {
            const images = document.querySelectorAll('img[data-src]');
            const observer = new IntersectionObserver((entries, observer) => {
                entries.forEach(entry => {
                    if (entry.isIntersecting) {
                        const img = entry.target;
                        img.src = img.dataset.src;
                        observer.unobserve(img);
                    }
                });
            }, { threshold: 0.1 });

            images.forEach(img => {
                observer.observe(img);
            });
        }

        window.addEventListener('DOMContentLoaded', lazyLoadImages);
    </script>
</body>
</html>

可能遇到的问题及解决方法

问题1：图片未加载

原因：可能是IntersectionObserver未正确初始化或图片元素未正确选择。

解决方法：

确保IntersectionObserver在DOM加载完成后初始化。
检查图片元素是否正确设置了data-src属性。

问题2：滚动时图片闪烁

原因：图片在进入可视区域前后的加载状态不一致。

解决方法：

使用占位符图片（如低分辨率的模糊图）来保持布局稳定。
确保图片加载完成后才移除占位符。

问题3：兼容性问题

原因：某些旧版浏览器不支持IntersectionObserver。

解决方法：

使用Polyfill库来兼容不支持IntersectionObserver的浏览器。
或者回退到基于滚动事件的实现方式。

通过以上方法，可以有效实现图片延迟加载，并解决常见的问题。

页面内容是否对你有帮助？

有帮助

没帮助

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

js实现图片延迟加载

基础概念

相关优势

类型

应用场景

实现方法

可能遇到的问题及解决方法

问题1：图片未加载

问题2：滚动时图片闪烁

问题3：兼容性问题

相关·内容

41-延迟加载

04.尚硅谷_图片加载框架Glide_在Recyclerview中加载图片.avi

45_尚硅谷_MyBatis_延迟加载

10.图片加载监听.avi

07.ImageRequest加载图片.avi

08.ImageLoader加载图片.avi

10.NetworkImageView加载图片.avi

04.加载网络图片.avi

09.加载图片带缓存.avi

04.在Recyclerview中加载图片.avi

03.主页&加载图片&刷新新数据.avi

106-尚硅谷-尚品汇-图片懒加载

扫码

相关资讯

热门标签

活动推荐

运营活动

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐