返回

图片懒加载：如何隐藏未加载图片的 alt 文本？

javascript

网页加载速度是影响用户体验的关键因素之一，而图片作为网页的重要组成部分，往往会占据大量的加载时间。为了提升网页加载速度，图片懒加载技术应运而生。它通过延迟加载非首屏图片，将宝贵的带宽资源优先分配给首屏内容的加载，从而缩短页面加载时间，提升用户感知速度。

然而，在实际应用中，我们可能会发现，使用懒加载技术后，未加载图片的 alt 属性文本会直接显示在页面上，这不仅影响页面美观，还可能让用户感到困惑。

为什么会出现这种情况？

要理解这个问题，我们得先了解一下 alt 属性的作用。alt 属性是 HTML 中 img 标签的一个重要组成部分，它的主要作用是为图片提供替代文本。当图片因为各种原因无法正常显示时，比如网络连接问题、图片路径错误或者用户禁用图片显示功能，浏览器就会显示 alt 属性中的文本，告诉用户图片的内容是什么。同时，搜索引擎爬虫也会读取 alt 属性中的文本，帮助理解图片内容，进而提升网页的 SEO 效果。另外，屏幕阅读器也会读取 alt 属性的文本，帮助视障用户理解网页内容。

由于 alt 属性的这种机制，当我们使用懒加载技术延迟加载图片时，在图片加载完成之前，浏览器会将 alt 属性的文本显示出来，作为图片的占位符。

如何隐藏未加载图片的 alt 文本？

我们可以结合 CSS 和 JavaScript 的一些技巧，巧妙地隐藏未加载图片的 alt 文本，并在图片加载完成后再将其显示出来。

方案一：利用 CSS 隐藏占位符

我们可以利用 CSS 的 font-size 属性将 alt 文本的字体大小设置为 0，从而使其不可见。同时，为了避免影响图片加载完成后 alt 文本的正常显示，我们需要在图片加载完成后将字体大小恢复到正常值。

img[data-src] { /* 选择使用 data-src 属性标识懒加载图片的 img 标签 */
  font-size: 0; /* 将字体大小设置为 0，隐藏 alt 文本 */
}

img[data-src]:not([src])::before { /* 选择尚未加载的图片 */
  content: attr(alt); /* 使用伪元素 ::before 显示 alt 文本作为占位符 */
  font-size: 16px; /* 设置占位符的字体大小 */
  color: #ccc; /* 设置占位符的颜色 */
}

img[data-src][src] { /* 图片加载完成后 */
  font-size: 16px; /* 恢复字体大小 */
}

方案二：使用 JavaScript 监听图片加载事件

我们可以使用 JavaScript 监听图片的 load 事件。当图片加载完成后，触发 load 事件，我们可以在事件处理函数中将图片的字体大小恢复到正常值。

const lazyImages = document.querySelectorAll('img[data-src]');

lazyImages.forEach(image => {
  image.addEventListener('load', () => {
    image.style.fontSize = '16px'; /* 恢复字体大小 */
  });
});

方案三：结合懒加载插件

如果你正在使用类似 lazysizes 这样的懒加载插件，可以结合插件提供的回调函数来实现 alt 文本的隐藏和显示。例如，lazysizes 插件提供了一个 afterLoad 回调函数，在图片加载完成后执行。

const lazyImages = document.querySelectorAll('img[data-src]');

lazyImages.forEach(image => {
  image.classList.add('lazyload'); // 添加 lazyload class，以便插件识别
});

// lazysizes 插件会在图片加载完成后自动调用 afterLoad 回调函数
window.lazySizesConfig = window.lazySizesConfig || {};
window.lazySizesConfig.afterLoad = (img) => {
  img.style.fontSize = '16px'; // 恢复字体大小
};

方案选择

上述三种方案都可以有效地隐藏未加载图片的 alt 文本，但在实际应用中，我们需要根据具体情况选择合适的方案。

  • 如果你没有使用懒加载插件，或者希望更加灵活地控制 alt 文本的显示，可以选择方案一或方案二，使用 CSS 和 JavaScript 直接操作 DOM 元素。
  • 如果你正在使用懒加载插件，并且插件提供了相应的回调函数，那么方案三可能是更便捷的选择，可以减少代码量，提高开发效率。

总结

通过以上方法，我们可以有效地隐藏未加载图片的 alt 文本，提升网页的美观度和用户体验。在实际应用中，我们需要根据具体情况选择合适的方案，并进行相应的调整和优化。

需要注意的是， 虽然我们可以隐藏未加载图片的 alt 文本，但这并不意味着我们可以忽略 alt 属性的重要性。alt 属性对于提升网页的可访问性和 SEO 优化仍然至关重要。我们应该为每一张图片都提供准确、简洁的 alt 文本，即使这些文本会被暂时隐藏。

常见问题解答

  1. 为什么我的图片加载完成后，alt 文本仍然没有显示出来？

    • 可能是你的 CSS 样式没有正确应用到图片元素上，检查一下选择器是否正确，以及是否有其他样式覆盖了你的设置。
    • 可能是你的 JavaScript 代码没有正确执行，检查一下代码是否有语法错误，以及是否在图片加载完成后才执行。

  2. 我可以使用 placeholder 图片代替 alt 文本吗？

    • 可以，placeholder 图片是一种常见的懒加载优化手段，它可以在图片加载完成之前显示一个低分辨率的占位图，提升用户体验。但是，placeholder 图片并不能完全替代 alt 文本，因为 alt 文本还可以为屏幕阅读器和搜索引擎提供信息。

  3. 如何为懒加载图片添加 loading 属性？

    • 你可以在 img 标签上添加 loading="lazy" 属性，告诉浏览器延迟加载该图片。需要注意的是，loading 属性目前还处于实验阶段，并不是所有浏览器都支持。

  4. 懒加载会影响 SEO 吗？

    • 如果正确地使用懒加载技术，并不会对 SEO 造成负面影响。你需要确保搜索引擎爬虫能够正确识别和索引懒加载图片，例如使用 data-src 属性代替 src 属性，并在 alt 属性中提供准确的图片。

  5. 除了图片懒加载，还有哪些方法可以提升网页加载速度？

    • 压缩图片、合并 CSS 和 JavaScript 文件、使用浏览器缓存、使用 CDN 加速、优化网页代码等等。

希望本文能够帮助你解决懒加载图片 alt 文本显示的问题，提升你的网页开发技能。