文章/答案/技术大牛

发布

js图片隐藏加载

在JavaScript中实现图片的隐藏加载，通常涉及到几个基础概念和技术：

基础概念

图片懒加载（Lazy Loading）：这是一种优化网页性能的技术，它只在图片即将进入用户视野时才开始加载图片，而不是一次性加载所有图片。
Intersection Observer API：这是一个现代浏览器提供的API，用于异步观察目标元素与其祖先元素或顶级文档视窗（viewport）交叉状态的变化。

类型

基于滚动事件的懒加载：通过监听滚动事件，判断图片是否进入可视区域。
Intersection Observer API：更高效的方式，避免频繁触发滚动事件。

应用场景

长页面：如新闻网站、博客、电商网站等，页面包含大量图片。
移动端：移动网络带宽有限，懒加载尤为重要。

实现方法

以下是使用Intersection Observer API实现图片懒加载的示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Image Lazy Loading</title>
    <style>
        img {
            width: 100%;
            height: auto;
            display: block;
            margin-bottom: 20px;
        }
        .lazy-load {
            opacity: 0;
            transition: opacity 0.5s;
        }
        .lazy-load.loaded {
            opacity: 1;
        }
    </style>
</head>
<body>
    <img class="lazy-load" data-src="path/to/image1.jpg" alt="Image 1">
    <img class="lazy-load" data-src="path/to/image2.jpg" alt="Image 2">
    <img class="lazy-load" data-src="path/to/image3.jpg" alt="Image 3">
    <!-- 更多图片 -->

    <script>
        document.addEventListener("DOMContentLoaded", function() {
            const images = document.querySelectorAll('.lazy-load');
            const observer = new IntersectionObserver((entries, observer) => {
                entries.forEach(entry => {
                    if (entry.isIntersecting) {
                        const img = entry.target;
                        img.src = img.dataset.src;
                        img.onload = () => img.classList.add('loaded');
                        observer.unobserve(img);
                    }
                });
            }, {
                rootMargin: '0px',
                threshold: 0.1
            });

            images.forEach(img => {
                observer.observe(img);
            });
        });
    </script>
</body>
</html>

解释

HTML部分：每个图片元素都有一个data-src属性，用于存储实际的图片路径，初始src属性为空。
CSS部分：定义了图片的样式，初始状态下图片透明度为0，加载完成后透明度变为1。
JavaScript部分：
- 使用IntersectionObserver监听图片是否进入可视区域。
- 当图片进入可视区域时，将data-src的值赋给src，并添加loaded类以显示图片。
- 停止观察已加载的图片。

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

兼容性问题：Intersection Observer API在较旧的浏览器中不被支持。可以通过Polyfill来解决兼容性问题。
图片闪烁：在某些情况下，图片可能会在加载完成后闪烁。可以通过CSS过渡效果来缓解这个问题。

通过以上方法，可以实现高效的图片懒加载，提升网页性能和用户体验。

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

有帮助

没帮助

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

js图片隐藏加载

基础概念

相关优势

类型

应用场景

实现方法

解释

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

相关·内容

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

10.图片加载监听.avi

07.ImageRequest加载图片.avi

08.ImageLoader加载图片.avi

10.NetworkImageView加载图片.avi

04.加载网络图片.avi

09.加载图片带缓存.avi

04.在Recyclerview中加载图片.avi

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

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

10.尚硅谷_Fresco_图片加载监听.avi

01.尚硅谷_图片加载框架Glide_简介.avi

扫码

相关资讯

热门标签

活动推荐

运营活动

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐