用对图片懒加载，网页加载速度翻倍提升！

前端

2023-10-17 06:55:11

图片懒加载是一种优化网页加载性能的技术，它通过延迟加载图片的方式来减少首屏加载时间，从而提高网页加载速度。

图片懒加载的原理

图片懒加载的原理很简单，就是在网页加载时，只加载当前视窗内需要显示的图片，而将其他图片的加载推迟到用户滚动到该图片所在位置时再进行加载。这样可以减少首屏加载时间，提高网页加载速度。

图片懒加载的实现

图片懒加载可以通过前端代码实现，也可以通过第三方库来实现。

前端代码实现

前端代码实现图片懒加载需要用到JavaScript，代码如下：

// 获取所有图片元素
var images = document.querySelectorAll('img');

// 遍历所有图片元素
for (var i = 0; i < images.length; i++) {
  // 为每个图片元素添加一个data-src属性，该属性的值为图片的真实地址
  images[i].setAttribute('data-src', images[i].src);

  // 将图片元素的src属性设置为一个空字符串，这样图片就不会被加载
  images[i].src = '';

  // 监听图片元素的滚动事件
  images[i].addEventListener('scroll', function() {
    // 如果图片元素已经进入视窗，则加载图片
    if (isInViewport(images[i])) {
      images[i].src = images[i].getAttribute('data-src');
    }
  });
}

// 判断图片元素是否已经进入视窗
function isInViewport(el) {
  var rect = el.getBoundingClientRect();
  return (
    rect.top >= 0 &&
    rect.left >= 0 &&
    rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
    rect.right <= (window.innerWidth || document.documentElement.clientWidth)
  );
}