正文

学会用JavaScript轻松加载图片：图片预加载、懒加载技巧及实际应用案例

/0 浏览量
0828

在网页设计中，图片是不可或缺的元素。然而，图片的加载速度往往会影响用户的浏览体验。为了解决这个问题，我们可以使用JavaScript来实现图片的预加载和懒加载。本文将详细介绍这两种技巧，并提供实际应用案例。

图片预加载

什么是图片预加载？

图片预加载是指预先加载页面中即将显示的图片，以减少页面加载时间，提高用户体验。

如何实现图片预加载？

  1. 创建预加载函数：我们可以创建一个预加载函数，用于加载指定路径的图片。
function preloadImage(imageSrc) {
  const img = new Image();
  img.src = imageSrc;
}
  1. 调用预加载函数：在页面加载过程中，调用预加载函数加载所有需要预加载的图片。
window.onload = function() {
  preloadImage('path/to/image1.jpg');
  preloadImage('path/to/image2.jpg');
  // ...
};

实际应用案例

假设我们有一个图片列表，需要预加载所有图片：

<ul>
  <li><img src="path/to/image1.jpg" alt="Image 1"></li>
  <li><img src="path/to/image2.jpg" alt="Image 2"></li>
  <!-- ... -->
</ul>

window.onload = function() {
  const images = document.querySelectorAll('ul li img');
  images.forEach((img) => {
    preloadImage(img.src);
  });
};

图片懒加载

什么是图片懒加载？

图片懒加载是指按需加载图片，即当用户滚动到图片位置时，才加载图片，从而减少页面加载时间。

如何实现图片懒加载？

  1. 监听滚动事件：监听页面滚动事件，当滚动到图片位置时，加载图片。
window.addEventListener('scroll', function() {
  const images = document.querySelectorAll('img[data-src]');
  images.forEach((img) => {
    if (isInViewport(img)) {
      img.src = img.getAttribute('data-src');
      img.removeAttribute('data-src');
    }
  });
});

function isInViewport(element) {
  const 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. 设置图片数据源：在图片标签中，使用data-src属性代替src属性，存储图片的真实路径。
<img data-src="path/to/image1.jpg" alt="Image 1">

实际应用案例

假设我们有一个图片列表，需要实现懒加载：

<ul>
  <li><img data-src="path/to/image1.jpg" alt="Image 1"></li>
  <li><img data-src="path/to/image2.jpg" alt="Image 2"></li>
  <!-- ... -->
</ul>

window.addEventListener('scroll', function() {
  const images = document.querySelectorAll('ul li img[data-src]');
  images.forEach((img) => {
    if (isInViewport(img)) {
      img.src = img.getAttribute('data-src');
      img.removeAttribute('data-src');
    }
  });
});

通过以上方法，我们可以轻松实现图片的预加载和懒加载，从而提高网页性能，提升用户体验。希望本文能对您有所帮助！

-- 展开阅读全文 --