使用 JavaScript 实现一个简单的图片懒加载效果

懒加载是什么？

在网页开发中，懒加载是一种优化技术，用于延迟加载页面上的资源（如图片），而不是在页面初始加载完后一次性加载所有资源。这样可以显著提高页面的加载速度和性能。

图片懒加载效果的实现

在这篇博客中，我将向大家展示如何使用 JavaScript 来实现一个简单的图片懒加载效果。

步骤一：HTML 结构

首先，我们需要在 HTML 中添加要懒加载的图片，并为它们增加一个自定义的属性（如 data-src），用于保存真实的图片 URL。

<img class="lazyload" data-src="path/to/image.jpg" alt="图片">

步骤二：CSS 样式

为了使图片懒加载效果更好地展示，我们需要为图片添加一些默认的样式，并且在加载时显示一个占位符。

.lazyload {
  opacity: 0;
  transition: opacity 0.3s;
}

.loaded {
  opacity: 1;
}

步骤三：JavaScript 实现

window.addEventListener('DOMContentLoaded', function() {
  var lazyloadImages = document.querySelectorAll('.lazyload');

  // 判断元素是否可见
  function isVisible(element) {
    var rect = element.getBoundingClientRect();
    var viewHeight = Math.max(document.documentElement.clientHeight, window.innerHeight);
    return !(rect.bottom < 0 || rect.top - viewHeight >= 0);
  }

  // 加载图片
  function loadImages() {
    for (var i = 0; i < lazyloadImages.length; i++) {
      if (isVisible(lazyloadImages[i])) {
        lazyloadImages[i].src = lazyloadImages[i].getAttribute('data-src');
        lazyloadImages[i].classList.add('loaded');
      }
    }
  }

  // 监听滚动事件，加载可见图片
  window.addEventListener('scroll', loadImages);
  
  // 初始加载第一屏的图片
  loadImages();
});

以上代码首先获取所有带有 lazyload 类的图片元素。接着，我们定义了一个函数 isVisible，用于判断元素是否在可见区域内。然后，我们定义了另一个函数 loadImages，用于加载可见的图片。

在 loadImages 函数中，我们遍历所有的图片元素，如果某个图片元素在可见区域内，我们将其真实的图片 URL 赋值给 src 属性，然后添加 loaded 类。最后，我们将 loadImages 函数绑定到滚动事件上，以实现滚动时加载图片的效果。

总结

通过使用 JavaScript，我们可以很容易地实现一个简单的图片懒加载效果。懒加载可以大大提高页面的加载速度和性能，而且对于那些拥有大量图片的网页非常有用。希望这篇博客对你有所帮助，谢谢阅读！

本文来自极简博客，作者：算法架构师，转载请注明原文链接：使用 JavaScript 实现一个简单的图片懒加载效果