JavaScript与图片懒加载与预加载技巧

在网页开发中，图片加载是一个常见的性能优化问题。当页面中包含大量的图片时，图片的加载可能会导致页面加载速度变慢，影响用户体验。为了解决这个问题，我们可以利用JavaScript提供的技巧，实现图片的懒加载和预加载，以提高页面的加载速度和性能。本文将介绍JavaScript与图片懒加载与预加载的技巧和方法。

一、图片懒加载

图片懒加载是一种延迟加载图片的技术，即在页面加载时只加载可视区域内的图片，当用户滚动页面到图片所在区域时再加载图片。这样可以减少页面加载时需要下载的图片数量，提高页面的加载速度。

以下是一个简单的示例代码，演示了如何使用JavaScript实现图片懒加载：

<!DOCTYPE html>
<html>
<head>
  <style>
    .image {
      width: 200px;
      height: 200px;
      background-color: #f9f9f9;
      margin-bottom: 20px;
    }
  </style>
</head>
<body>
  <div class="image" data-src="image1.jpg"></div>
  <div class="image" data-src="image2.jpg"></div>
  <div class="image" data-src="image3.jpg"></div>

  <script>
    function lazyLoadImages() {
      var images = document.querySelectorAll('.image');
      var windowHeight = window.innerHeight;

      images.forEach(function(image) {
        var rect = image.getBoundingClientRect();
        var imageSrc = image.getAttribute('data-src');

        if (rect.top >= 0 && rect.top <= windowHeight) {
          image.style.backgroundImage = 'url(' + imageSrc + ')';
        }
      });
    }

    window.addEventListener('scroll', lazyLoadImages);
    window.addEventListener('resize', lazyLoadImages);
    lazyLoadImages();
  </script>
</body>
</html>

在上面的代码中，我们通过使用data-src属性存储图片的真实地址，并监听滚动事件和窗口大小改变事件，来判断图片是否进入可视区域。当图片进入可视区域时，将data-src属性的值赋给background-image属性，从而加载并显示图片。

二、图片预加载

图片预加载是一种在页面加载之前提前加载图片的技术，即在页面加载时预先下载页面中的图片，以减少图片的加载时间和提高用户体验。

以下是一个简单的示例代码，演示了如何使用JavaScript实现图片预加载：

<!DOCTYPE html>
<html>
<head>
  <style>
    .image {
      display: none;
    }
  </style>
</head>
<body>
  <img class="image" src="image1.jpg">
  <img class="image" src="image2.jpg">
  <img class="image" src="image3.jpg">

  <script>
    function preloadImages() {
      var images = document.querySelectorAll('.image');

      images.forEach(function(image) {
        var imageSrc = image.getAttribute('src');
        var img = new Image();
        img.src = imageSrc;
      });
    }

    window.addEventListener('load', preloadImages);
  </script>
</body>
</html>

在上面的代码中，我们通过创建Image对象，并设置其src属性为图片的地址，来实现图片的预加载。通过在页面加载完成后触发load事件，即可开始预加载图片。

结论

JavaScript提供了图片懒加载和预加载的技巧，可以帮助我们优化页面的加载速度和性能。通过合理运用这些技术，我们可以延迟加载图片、减少不必要的下载量，并提前加载页面中的图片，以提升用户体验。本文介绍了图片懒加载和预加载的基本概念、示例代码和实现方法，希望能对你在网页开发中有所帮助。