首页教程软件教程正文

图片懒加载如何进一步提高加载的效率和性能

uncle 软件教程 2025年08月6日

0 收藏 0 点赞 921 浏览 3324 个字

摘要 :

文章目录引言一、使用 Intersection Observer API 二、设置阈值三、预加载图片四、懒加载非图片资源 1. 视频和音频懒加载 2. IFrame 懒加载总结本文重点讲解图……

文
章
目
录

引言
一、使用 Intersection Observer API
二、设置阈值
三、预加载图片
四、懒加载非图片资源

1. 视频和音频懒加载
2. IFrame 懒加载

总结

本文重点讲解图片懒加载如何进一步提高图片懒加载的效率和性能，我们一起来学习下！

引言

在上一篇文章中我们了解了一下图片懒加载以及它的实现原理，图片懒加载是一种优化网页性能的技术，它可以在网页加载时只加载当前屏幕可视区域内的图片，而不会一次性加载所有图片，从而提高网页的加载速度、减少后台服务器压力，并提升用户体验。

在这篇文章里我们再来一起了解一些可以进一步提高图片懒加载的效率和性能的优化方法。

一、使用 Intersection Observer API

Intersection Observer API是浏览器提供的一种监听元素可见性的方法，它可以在元素进入或离开可视区域时触发回调函数。使用Intersection Observer API可以省去计算元素位置的步骤，并且可以提高性能。

使用 Intersection Observer API 可以简化代码，例如：

const observer = new IntersectionObserver(function(entries) {  
  entries.forEach(function(entry) {  
    if (entry.isIntersecting) {  
      const image = entry.target;  
      image.src = image.dataset.src;  
      observer.unobserve(image);  
    }  
  });  
});  
   
images.forEach(function(image) {  
  observer.observe(image);  
});

在上面的代码中，我们首先创建了一个IntersectionObserver对象，并传入了一个回调函数。在回调函数中，我们遍历所有的entries，判断是否在可视区域内，如果是，就将 data-src 属性的值赋给src属性，并调用unobserve()方法停止观察该元素。

最后，我们遍历所有带有data-src属性的img标签，并调用observe()方法观察它们。

二、设置阈值

设置阈值可以控制元素何时被视为“可见”，从而进一步优化图片懒加载的效率。例如：

const options = {  
  root: null,  
  rootMargin: \'0px\',  
  threshold: 0.5  
};  
   
const observer = new IntersectionObserver(function(entries) {  
  entries.forEach(function(entry) {  
    if (entry.isIntersecting) {  
      const image = entry.target;  
      image.src = image.dataset.src;  
      observer.unobserve(image);  
    }  
  });  
}, options);

在上面的代码中，我们使用options对象设置了threshold属性为0.5，表示当元素的一半进入可视区域时就被视为“可见”。可以根据实际情况调整threshold属性的值，以实现更加精细的控制。

三、预加载图片

预加载图片可以进一步提高用户体验，例如在鼠标悬停或点击事件时预加载图片。例如：

images.forEach(function(image) {  
  const src = image.dataset.src;  
  const img = new Image();  
  img.src = src;  
  img.onload = function() {  
    image.src = src;  
  };  
});

在上面的代码中，我们通过创建一个新的Image对象来预加载图片，然后在图片加载完成后将其赋给img标签的src属性。这样可以加快图片加载速度，从而提高用户体验。

四、懒加载非图片资源

除了图片，还有其他类型的资源也可以使用懒加载技术，例如视频、音频、IFrame 等。对于这些资源，我们可以使用类似于图片懒加载的方法来实现懒加载。

1. 视频和音频懒加载

对于视频和音频，我们可以使用 HTML5 的video和audio标签来实现懒加载。我们可以将视频或音频文件的地址存储到data-src属性上，然后在用户触发播放事件时再加载资源。例如：

<video controls data-src=\"video.mp4\"></video>  
   
<script>  
  const videos = document.querySelectorAll(\'video[data-src]\');  
  
  function isInViewport(element) {  
    const rect = element.getBoundingClientRect();  
    return rect.bottom > 0 &&  
           rect.right > 0 &&  
           rect.left window.innerWidth || document.documentElement.clientWidth) &&  
           rect.top window.innerHeight || document.documentElement.clientHeight);  
  }  
  
  function lazyLoad() {  
    videos.forEach(function(video) {  
      if (isInViewport(video)) {  
        video.src = video.dataset.src;  
        video.removeAttribute(\'data-src\');  
      }  
    });  
  }  
  
  window.addEventListener(\'scroll\', lazyLoad);  
  window.addEventListener(\'resize\', lazyLoad);  
  window.addEventListener(\'orientationchange\', lazyLoad);  
  
  lazyLoad();  
</script>

在上面的代码中，我们首先获取所有带有data-src属性的video标签，然后使用 isInViewport() 函数判断元素是否在可视区域内，如果是，就将data-src属性的值赋给src属性，并将data-src属性删除，从而开始加载视频。

2. IFrame 懒加载

iframe 是一种嵌入式的网页元素，也可以使用懒加载技术来优化性能。我们可以将 IFrame 的地址存储到 data-src 属性上，然后在用户触发事件时再加载资源。例如：

<button id=\"load-iframe\">Load IFramebutton>  
<iframe frameborder=\"0\" data-src=\"https://www.panziye.com\">iframe>  
   
<script>  
  const button = document.getElementById(\'load-iframe\');  
  const iframe = document.querySelector(\'iframe[data-src]\');  
  
  button.addEventListener(\'click\', function() {  
    iframe.src = iframe.dataset.src;  
    iframe.removeAttribute(\'data-src\');  
  });  
</script>

在上面的代码中，我们首先获取带有 data-src 属性的 iframe 标签，并将其存储到 iframe 变量中。然后，我们绑定一个点击事件到按钮上，在用户点击按钮时将 data-src 属性的值赋给 src 属性，并将data-src属性删除，从而开始加载 IFrame。