返回

5分钟get图片懒加载技巧｜8月更文挑战

前端

图片懒加载是一种优化网页加载速度的技术，它可以延迟加载页面上的图片，直到它们出现在视口中。这意味着当用户第一次访问页面时，只有页面顶部的图片会被加载，而其他图片只有在用户滚动到它们的区域时才会被加载。这可以显著减少页面加载时间，特别是在页面上有大量图片的情况下。

如何实现图片懒加载？

实现图片懒加载的方法有很多，最常见的方法之一是使用JavaScript的scroll事件监听器。当用户滚动页面时，scroll事件监听器就会被触发，从而可以检测到哪些图片出现在视口中，并加载这些图片。

以下是如何使用JavaScript实现图片懒加载的步骤：

  1. 在<head>标签中，引入jQuery库：
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  1. 在页面底部，添加以下JavaScript代码：
$(window).scroll(function() {
  // 获取所有具有data-src属性的图片元素
  var lazyImages = document.querySelectorAll('img[data-src]');

  // 循环遍历这些图片元素
  for (var i = 0; i < lazyImages.length; i++) {
    // 获取图片的data-src属性值
    var src = lazyImages[i].getAttribute('data-src');

    // 检查图片是否出现在视口中
    if (isElementInViewport(lazyImages[i])) {
      // 如果图片出现在视口中，则将data-src属性值赋给src属性
      lazyImages[i].setAttribute('src', src);

      // 从data-src属性中删除图片的src属性
      lazyImages[i].removeAttribute('data-src');
    }
  }
});

function isElementInViewport(element) {
  // 获取元素的边界框
  var rect = element.getBoundingClientRect();

  // 检查元素是否出现在视口中
  return (
    rect.top >= 0 &&
    rect.left >= 0 &&
    rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
    rect.right <= (window.innerWidth || document.documentElement.clientWidth)
  );
}
  1. 在HTML代码中，为要懒加载的图片添加data-src属性，并将其值设置为图片的实际URL：
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="image.jpg" alt="图片">
  1. 保存并运行HTML文件，就可以看到图片懒加载效果了。

处理图片加载错误

在实现图片懒加载时，有时可能会遇到图片加载错误的情况。为了处理这些错误，可以在JavaScript代码中添加以下代码：

lazyImages[i].addEventListener('error', function() {
  // 如果图片加载失败，则将src属性值设置为默认图片的URL
  this.setAttribute('src', 'default.jpg');
});

这样，当图片加载失败时，就会自动加载默认图片，从而避免页面出现空白图片。

结语

图片懒加载是一种非常实用的技术，它可以显著提升网页的加载速度和性能。如果您想优化网页的性能，减少页面加载时间，那么图片懒加载是一个非常值得考虑的技术。