使用 HTML 和 JavaScript 高效加载图像-猿码集

使用 HTML 和 JavaScript 高效加载图像

在现在这个高速通讯的时代，用户们要求网站和应用程序的速度越来越快。而图片却是导致许多页面加载缓慢的问题之一。虽然可以使用小图片和压缩的图片进行优化，但是HTML 和 JavaScript技术也可以帮助我们优化图像的加载。

1. 图像预加载

图像预加载是指提前在页面加载之前预加载图像，以防止用户在浏览网页时出现延迟加载的情况。这可以通过JavaScript来完成。以下是一个基本的图像预加载函数示例。


function preloadImage(imageUrl) {
  const img = new Image();
  img.src = imageUrl;
}

当该函数被调用时，JS引擎会准备用于预加载的图像，而不会阻止页面中其他元素的加载和解析。要将此函数应用于准备预加载的多个图像时，可以将图像URL存储在数组中，并使用forEach()方法循环调用函数：


const imageUrls = [
  'image1.jpg',
  'image2.jpg',
  'image3.jpg'
];
imageUrls.forEach(preloadImage);

这将请求加载图像，但将它们暂时存储在缓存中，以便在需要时快速呈现。

2. 懒加载

懒加载是指在用户滚动到页面的特定部分之前不加载图像，并在需要时进行加载。这可以使用JavaScript完成。以下是一些懒加载库的示例：

Lazy Load: 是一款基于jQuery的图片懒加载库。

Intersection Observer API: 是一个浏览器原生的API，它可以在不使用JavaScript轮询元素的情况下，观察元素何时进入和离开视窗。可以使用它来实现图像懒加载。

3. 响应式图像

响应式图像是指能够在不同屏幕尺寸上正确缩放和呈现的图像。响应式图像可以通过使用srcset和sizes属性来实现，这两个属性也可以与HTML图片标签结合使用。以下是一个实际的例子：


<img src="small.jpg" srcset="large.jpg 1000w, medium.jpg 600w, small.jpg 300w" sizes="(min-width: 1024px) 1000px, 100vw">

在上面的示例中，图片总共有三个不同的版本，并且当用户的屏幕宽度大于等于1024像素时，此图像的宽度将设为1000像素。否则，此图像将以屏幕的可见宽度呈现。

4. 图像压缩

图像压缩可以使用许多不同的工具和插件来进行。这是一个解决图像加载缓慢问题的重要措施。以下是需要注意的技术：

图像压缩: 图片压缩器（例如PhotoShop和GIMP）可以减小文件大小，并减少加载时间。在线工具像Tiny PNG等可以自动优化图像大小，也是一个不错的选择。

使用WebP图像格式: 使用WebP图像格式可以减小图像文件的大小。但是，需要注意的是这种格式不是所有浏览器都支持。

5. CDN （内容分发网络）

CDN是指由分散在不同地理位置的服务器组成的网络，它可以缓存静态资源，例如脚本、样式和图像。使用CDN可以将图像分发到离用户最近的服务器上，缩短响应时间，并减少图像加载时间，提高网站性能。

6. 延迟加载

如果您的网站有很多图片，您可以考虑使用延迟加载技术，延迟加载是指在用户滚动页面到某些区域时才加载图片。这可以通过JavaScript完成。以下是一个基本的延迟加载函数：


function lazyLoad() {
  const lazyImages = document.querySelectorAll('.lazy');
  
  lazyImages.forEach(image => {
    if (isInViewport(image)) {
      image.src = image.dataset.src;
      image.classList.remove('lazy');
    }
  });
}
function isInViewport(element) {
  const rect = element.getBoundingClientRect();
  
  return (
    rect.bottom >= 0 && rect.right >= 0 && rect.top <= (window.innerHeight || document.documentElement.clientHeight) && rect.left <= (window.innerWidth || document.documentElement.clientWidth)
  );
}
window.addEventListener('scroll', lazyLoad);

在上面的示例中，可以使用.data()属性将要加载的图像URL存储在图像标记上，然后在图像进入视口时将其替换为实际图像URL。

结论

最后，优化图像是优化页面性能的重要组成部分。可以使用HTML和JavaScript技术来完成以下优化：

图像预加载

懒加载

响应式图像

图像压缩

使用CDN

延迟加载

通过使用以上技术，您可以大大减少页面的加载时间，提高用户体验。

使用 HTML 和 JavaScript 高效加载图像