实现图片懒加载：`loading=’lazy’` 与 CSS 骨架屏结合

告别卡顿，拥抱流畅：`loading='lazy'` 和骨架屏的完美情缘

各位看官，咱们今天聊点实用的，保证让你的网页加载速度飞起来，告别用户抱怨“加载慢死了”的噩梦。说的是图片懒加载和骨架屏这对黄金搭档。

想象一下，你兴致勃勃地打开一个网页，准备欣赏美图，结果呢？页面慢吞吞地，图片一张张挤牙膏似的往外冒，让你恨不得把手机砸了。这就是图片懒加载没做好的惨痛教训。

图片懒加载：只加载你“看”得到的

图片懒加载，顾名思义，就是让图片“懒”一点，别一股脑全加载出来。它的核心思想是：只加载用户当前视窗（viewport）内的图片，当用户滚动页面，即将看到其他图片时，再加载它们。这样一来，网页首次加载时，需要下载的资源就大大减少，速度自然嗖嗖地提升。

在过去，实现图片懒加载需要用到JavaScript，代码写起来也略微繁琐。但现在，HTML5提供了一个非常方便的属性：loading='lazy'。

loading='lazy'：一行代码，轻松搞定

这简直是懒人福音！只需要在<img>标签中添加loading='lazy'属性，就能实现图片懒加载。

<img src="image1.jpg" loading="lazy" alt="描述图片1">
<img src="image2.jpg" loading="lazy" alt="描述图片2">
<img src="image3.jpg" loading="lazy" alt="描述图片3">

就是这么简单！浏览器会自动帮你处理图片加载的问题，是不是感觉世界都美好了？

loading='lazy' 的三种取值：

lazy：启用懒加载。
eager：立即加载图片，不使用懒加载。相当于没有loading属性。
auto：浏览器自行决定是否使用懒加载。

为什么要用loading='lazy'？

提升页面加载速度： 减少了首次加载的资源，页面更快地呈现给用户，用户体验蹭蹭上涨。
节省带宽： 只有用户看到的图片才会被加载，减少了不必要的流量消耗。特别是对于移动端用户，这能省下不少流量费。
减轻服务器压力： 减少了服务器的请求次数，降低了服务器的负载。

loading='lazy' 的兼容性：

虽然loading='lazy'非常方便，但并非所有浏览器都支持。不过，主流的现代浏览器，如Chrome、Firefox、Safari、Edge等都已支持。对于不支持的浏览器，可以使用JavaScript polyfill来提供兼容性。

别高兴太早，loading='lazy' 的潜在问题：

虽然loading='lazy'很棒，但它也有一些潜在问题。最常见的问题就是：图片加载出来之前，页面会出现空白。这会给用户造成一种“页面没加载完”的错觉，影响用户体验。

骨架屏：填补空白，优雅过渡

为了解决这个问题，我们需要请出另一位主角：骨架屏。

骨架屏，顾名思义，就是页面的一个“骨架”。它在图片加载之前，先显示一个简单的占位符，模拟图片的形状和颜色。这样，用户在等待图片加载时，看到的是一个有结构的页面，而不是一片空白。

骨架屏的实现方式：

实现骨架屏有很多种方式，最常见的包括：

CSS 样式： 使用CSS的background-color、border-radius等属性，创建一个简单的矩形或圆形，模拟图片的形状。
```
.skeleton {
    width: 200px;
    height: 150px;
    background-color: #f2f2f2;
    border-radius: 5px;
}
```
SVG： 使用SVG创建更复杂的图形，模拟图片的形状和内容。
JavaScript： 使用JavaScript动态生成骨架屏，并将其插入到页面中。

loading='lazy' 和骨架屏的完美结合：

现在，我们将loading='lazy'和骨架屏结合起来，打造一个流畅、高效的图片加载体验。

在<img>标签中添加loading='lazy'属性：

<img src="image.jpg" loading="lazy" alt="图片描述" class="lazy-load">

添加骨架屏的HTML结构：

<div class="image-container">
    <div class="skeleton"></div>
    <img src="image.jpg" loading="lazy" alt="图片描述" class="lazy-load">
</div>

使用CSS控制骨架屏的显示和隐藏：

.image-container {
    position: relative;
}

.skeleton {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #f2f2f2;
    border-radius: 5px;
    z-index: 1; /* 确保骨架屏在图片上方 */
}

.lazy-load {
    display: none; /* 初始隐藏图片 */
}

/* 当图片加载完成后，隐藏骨架屏，显示图片 */
.lazy-load:not([src=""]) + .skeleton {
    display: none;
}

.lazy-load[src=""] {
    display: none;
}

（可选）使用JavaScript监听图片加载事件，动态显示图片：

const images = document.querySelectorAll('img[loading="lazy"]');

const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
        if (entry.isIntersecting) {
            const image = entry.target;
            image.src = image.dataset.src;
            observer.unobserve(image);
        }
    });
});

images.forEach(image => {
    image.dataset.src = image.src;
    image.src = ""; // 初始清空图片src，防止提前加载
    observer.observe(image);
});

代码解释：

image-container：包裹图片和骨架屏的容器，用于控制它们的布局。
skeleton：骨架屏的样式，可以根据实际情况进行调整。
lazy-load：图片的样式，初始设置为display: none;，隐藏图片。
.lazy-load:not([src=""]) + .skeleton { display: none; }：当图片加载完成后（src属性不为空），隐藏骨架屏。
JavaScript 代码使用 IntersectionObserver 来监测图片是否进入视口。当图片进入视口后，将 data-src 中的图片地址赋值给 src，触发图片加载。同时，清空了初始 src 属性，避免浏览器提前加载。

最终效果：

当页面加载时，首先显示骨架屏，模拟图片的形状。当图片加载完成后，骨架屏消失，显示真实的图片。这样，用户在等待图片加载时，不会看到一片空白，而是看到一个有结构的页面，体验更加流畅。

骨架屏的进阶技巧：

动画效果： 可以给骨架屏添加一些动画效果，例如闪烁、渐变等，使其看起来更加生动。
更复杂的骨架： 可以使用SVG或JavaScript创建更复杂的骨架，模拟图片的更多细节。
根据图片类型选择不同的骨架： 可以根据图片的类型（例如头像、风景图等）选择不同的骨架，提供更精准的占位。

总结：

loading='lazy' 和骨架屏是提升网页图片加载速度和用户体验的利器。loading='lazy'让图片加载更加智能，只加载用户“看”得到的图片，减少了不必要的资源消耗。骨架屏则填补了图片加载前的空白，让用户体验更加流畅。

将两者结合起来，可以打造一个高效、流畅的图片加载体验，让你的网页告别卡顿，拥抱流畅，赢得用户的芳心。

各位看官，赶紧行动起来，让你的网页速度飞起来吧！别忘了，代码只是工具，真正的艺术在于你如何运用它们，创造出更好的用户体验。祝你的网页加载速度像火箭一样快！

告别卡顿，拥抱流畅：loading='lazy' 和骨架屏的完美情缘

发表回复 取消回复

告别卡顿，拥抱流畅：`loading='lazy'` 和骨架屏的完美情缘

发表回复取消回复