如何深入理解JavaScript中的懒加载

载说明：原创不易，未经授权，谢绝任何形式的转载

懒加载是一种延迟加载非必要内容的方法，直到用户需要查看它为止。与其他加载方法不同，其他加载方法在访问页面时同时加载所有网站资源，而懒加载采取更加谨慎的方式。它延迟显示某些元素，如图片、视频和其他多媒体，直到用户主动与网页进行交互。本文将向您展示如何使用懒加载，以便您的用户在访问您的网站时获得更好的体验。

介绍

网络用户对网站加载时间和性能有很高的期望。加载缓慢的网站可能会增加跳出率并让用户感到不满意。为了应对这一挑战，开发人员不断寻求不同的技术来提高速度和整体用户体验，其中一种方法就是“懒加载”。为了实现懒加载，开发人员使用JavaScript。通过使用JavaScript，Web开发人员可以控制特定元素从服务器获取和渲染到用户屏幕的时间和方式。本文将探讨懒加载的好处、实施方法、对Web性能的影响、挑战和最佳实践。

懒加载的好处

减少带宽使用：加载不必要的资源会消耗大量带宽，影响用户和网站所有者。延迟加载可以通过仅加载所需资源来节省带宽。对于可能不会向下滚动查看整个页面的访问者来说，这将变得有益，因为它可以帮助防止他们超出每月限额。
提高页面速度得分和增强SEO性能：搜索引擎将页面速度视为排名因素之一。通过改善加载时间，延迟加载对Google的PageSpeed等各种工具测量的页面速度得分产生积极影响。更高的页面速度得分改善了SEO，并有助于提高用户留存率和转化率。
减少服务器负载：通过按需获取资源，它有助于更高效地分配服务器负载。它减轻了服务器压力，使其能够处理更多的用户请求。
改进的交互时间(TTI)：交互时间测量网页完全交互所需的时间，允许用户与按钮、链接和其他元素进行交互。通过优先加载重要内容，惰性加载有助于减少TTI，为用户提供更愉悦的浏览体验。
优化移动浏览和改善用户体验：移动设备通常具有有限的处理能力和网络功能。通过采用延迟加载，网站适应这些限制，提供更流畅的体验并减少数据消耗，使其更适合移动设备。用户可以快速与可见内容交互，而无需等待屏幕外资源加载。

JavaScript中实现延迟加载的技术

在JavaScript中，可以通过不同的方法实现延迟加载。然而，两种广泛使用的技术是使用Intersection Observer API来延迟加载图像，以及在滚动事件中实现内容的延迟加载。让我们通过示例来探讨这两种技术，以了解它们的工作原理：

1、使用Intersection Observer API进行图片的懒加载

Intersection Observer API是一个JavaScript API，允许开发人员观察元素与特定祖先或视口的交叉变化。它跟踪目标元素的可见性，并在元素进入或离开视图时通知开发人员。它非常适用于延迟加载图像，因为它在图像进入或离开视口时通知我们，从而允许我们根据需要加载图像。它在一个单独的线程上运行，不会阻塞主JavaScript线程。该API不仅限于图像，还可以用于延迟加载任何内容，例如视频、iframe甚至是生成的页面部分。

多个Intersection Observers可以同时观察同一页上的不同元素。例如，假设您有一个页面上有多个图像，并且希望在用户向下滚动页面时延迟加载这些图像。下面是如何使用Intersection Observer API和原生JavaScript实现延迟加载的方法。要开始，请确保您有一个基本的HTML结构，其中包含带有 img 标签的 data-src 属性，指定图像的实际源URL。我们将使用 data-src 来存储图片的URL，而不是使用传统的 src 属性来实现图片的懒加载。

<!DOCTYPE html>
<html>
<head>
 <title>Lazy Loading Images</title>
</head>
<body>
 <h1>Lazy Loading Images Example</h1>
 <img class="lazy" data-src="image1.jpg" alt="Image 1">
 <img class="lazy" data-src="image2.jpg" alt="Image 2">
 <!-- Add more images with the "lazy" class and "data-src" attribute -->
</body>
</html>

在我们的JavaScript代码中，我们将创建一个Intersection Observer的实例，并指定一个回调函数，每当观察的元素进入或离开视口时，该函数将被触发。

// Get all elements with the "lazy" class
const lazyImages=document.querySelectorAll(".lazy");
// Create a new Intersection Observer
const observer=new IntersectionObserver((entries, observer)=> {
 entries.forEach((entry)=> {
  if (entry.isIntersecting) {
   // Load the image when it comes into the viewport
   entry.target.src=entry.target.dataset.src;
   observer.unobserve(entry.target); // Unobserve the image after it's loaded
  }
 });
});
// Observe each lazy image
lazyImages.forEach((image)=> {
 observer.observe(image);
});

在上面的代码中，首先使用 document.querySelectorAll(".lazy") 选择所有具有“lazy”类的元素。然后，我们创建一个新的Intersection Observer实例，传入一个回调函数，每当观察的元素（在这种情况下是懒加载的图片）进入或退出视口时触发。当观察到一张图片并进入视口时（即 entry.isIntersecting 为真），我们将其 src 属性设置为 data-src 的值，该值保存了实际的图片URL。这个操作触发了图片的懒加载。然后，我们调用 observer.unobserve(entry.target) 来停止观察图片一旦加载完成以优化性能。

2. 滚动事件上的懒加载内容:

基于滚动事件的方法可以实现高度定制的懒加载实现。您可以完全控制内容何时以及如何加载，使其适用于需要在元素可见时执行特定任务或转换的场景。滚动事件是JavaScript的一个特性，被所有现代浏览器支持。这意味着您不必担心兼容性问题。

对于单页应用程序，其中内容随着用户浏览网站而加载，使用滚动事件可能更直观。与Intersection Observer API最适合图像和特定元素不同，基于滚动事件的懒加载提供了更多的灵活性。您可以将其应用于任何内容或复杂组件，这些内容可能不适合“在视图中”的概念。让我们看一个例子。在这里，您将再次拥有一个基本的HTML结构，其中包含要惰性加载的元素。但是，这次我们不需要像 data-src 这样的特殊属性。

<!DOCTYPE html>
<html>
<head>
 <title>Lazy Loading Content on Scroll</title>
</head>
<body>
 <h1>Lazy Loading Content Example</h1>
 <div class="lazy-content">
  <p>Some content to be lazily loaded...</p>
 </div>
 <div class="lazy-content">
  <p>More content to be lazily loaded...</p>
 </div>
 <!-- Add more elements with the "lazy-content" class -->
</body>
</html>

在我们的JavaScript代码中，你将会有一个函数 isElementInViewport(element) ，它会检查一个元素是否在视口中，然后定义一个 lazyLoadContent() 函数，该函数使用 document.querySelectorAll(".lazy-content") 遍历所有具有“lazy-content”类的元素。

// Function to check if an element is in the viewport
function isElementInViewport(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)
 );
}
// Function to lazily load content
function lazyLoadContent() {
 const lazyContentElements=document.querySelectorAll(".lazy-content");
 lazyContentElements.forEach((element)=> {
  if (isElementInViewport(element)) {
   // Add your logic to load the content for the element here
   element.classList.add("loaded");
  }
 });
}
// Attach the lazyLoadContent function to the scroll event
window.addEventListener("scroll", lazyLoadContent);
// Call the function initially to load the visible content on page load
lazyLoadContent();

对于每个元素，它使用 isElementInViewport(element) 检查它是否在视口中，如果为真，则加载该元素的内容。在这个例子中，我们只是给元素添加一个类名“loaded”，但你可以根据你的使用情况自定义这部分。然后，我们使用 window.addEventListener("scroll", lazyLoadContent) 将 lazyLoadContent() 函数附加到滚动事件上。这确保了每当用户滚动页面时都会调用该函数。此外，我们在页面加载时调用 lazyLoadContent() 来加载可见内容。

何时使用懒加载

对于网页开发人员来说，知道何时实施延迟加载是很重要的。明智地使用它以最大化其效果并避免潜在的缺点是至关重要的。延迟加载是那些严重依赖图片的网站必备的优化功能，比如在线作品集、电子商务平台和摄影网站。这些网站通常展示大量高分辨率的图片，这些图片会显著影响初始页面加载时间。

通过延迟加载图片，只有用户视口内或可见区域的图片会最先加载。利用无限滚动或分页来展示大量内容的网页可以从延迟加载中受益。带有交互元素和小部件（如滑块、轮播图和手风琴）的页面也可以利用延迟加载。跨多个页面的长文章或博客文章也可以从延迟加载中受益。与预加载所有页面不同，延迟加载可以在用户滚动到当前页面末尾时获取和加载后续页面。具有资源密集型功能的网站，例如交互式地图、数据可视化和复杂动画，可以使用延迟加载来优化性能。

懒加载的挑战

虽然JavaScript中的懒加载有助于提高网页性能，但也面临一些挑战。与懒加载相关的一些挑战包括：

JavaScript 依赖：延迟加载依赖 JavaScript 来获取和加载所需资源。然而，并非所有用户的浏览器都启用了 JavaScript。在这种情况下，延迟加载的内容可能无法加载，从而给部分用户带来糟糕的用户体验。
复杂的实现：实现延迟加载可能变得复杂，特别是在具有复杂结构和各种类型资源的网站上。管理多个延迟加载元素，确保它们在正确的时间加载，并处理交互可能具有挑战性。
管理图像尺寸：在响应式设计中，懒加载图像在处理不同屏幕尺寸和分辨率时可能会变得具有挑战性。

最佳实践

开发人员应遵循最佳实践，以充分发挥JavaScript中的延迟加载的潜力。在将延迟加载应用于网站之前，要确定应立即加载的重要内容，以创建良好的用户体验。让我们来看一些实施延迟加载的最佳实践：

优化图像和媒体文件：为了优化图像的懒加载，使用适当的图像格式并在不损失质量的情况下进行压缩。使用 srcset 和 sizes 属性实现响应式图像，根据用户的视口提供不同的图像尺寸，节省带宽。
使用占位元素：为了防止内容移动和布局不稳定，使用占位元素来保留懒加载内容的空间。可以使用占位图像或简单的占位符，比如具有定义尺寸和背景颜色的div元素，以保持布局直到实际内容加载完成。
实现Intersection Observer API：Intersection Observer API是一种简化懒加载实现的JavaScript功能。它允许开发人员高效地跟踪元素何时进入视口，从而触发懒加载内容的加载。
为JavaScript禁用的用户提供备选方案：并非所有用户都在其浏览器中启用了JavaScript。为了满足这些用户的需求，为延迟加载的内容提供备选解决方案。例如，使用 <noscript> 标签来包含延迟加载图像和媒体的静态版本。这样可以确保禁用JavaScript的用户仍然可以访问重要内容，并保持良好的用户体验。
处理错误：延迟加载有时可能会导致错误，例如损坏的图像URL或资源加载失败。实现错误处理以优雅地处理这些情况。用适当的占位符替换损坏或缺失的图像，并将错误记录到控制台以进行调试。错误处理有助于为用户提供无缝体验，并帮助开发人员识别和解决问题。
保持懒加载轻量化：避免过度加载网页，限制仅对显著影响页面加载时间的元素进行懒加载。
在各种设备、浏览器和网络速度上彻底测试：在将懒加载应用到实际网站之前，请在各种设备、浏览器和网络速度上彻底测试其实施。在台式机、笔记本电脑、平板电脑和智能手机上进行测试，以确保行为和响应性的一致性。
在将图像插入DOM之前，异步解码图像，这样可以防止浏览器在图像加载时冻结。

结束

懒加载是一种使网站更快、更易于使用的方法。它通过等待在需要时再加载不重要的内容来实现。这意味着您可以更快地看到页面并使用更少的数据。在JavaScript中实现懒加载时，浏览器的兼容性是另一个需要考虑的因素。虽然许多现代浏览器支持懒加载所需的功能和API，但旧版本的浏览器可能缺乏支持或功能有限。因此，开发人员必须注意他们想要支持的浏览器，并相应选择适当的技术。本文介绍了懒加载的好处、技术、挑战和最佳实践，为现代网页开发中懒加载的潜力提供了启示。

由于文章内容篇幅有限，今天的内容就分享到这里，文章结尾，我想提醒您，文章的创作不易，如果您喜欢我的分享，请别忘了点赞和转发，让更多有需要的人看到。同时，如果您想获取更多前端技术的知识，欢迎关注我，您的支持将是我分享最大的动力。我会持续输出更多内容，敬请期待。

言

图片懒加载也是比较常见的一种性能优化的方法，最近在用vue做一个新闻列表的客户端时也用到了，这里就简单介绍下实现原理和部分代码。

实现原理

加载页面的时候，图片一直都是流量大头，针对图片的性能方法也挺多的比如base64、雪碧图等；懒加载也是其中一种，主要原理是将非首屏的图片src设为一个默认值，然后监听窗口滚动，当图片出现在视窗中时再给他赋予真实的图片地址，这样可以保证首屏的加载速度然后按需加载图片。

具体代码

首先在渲染时，图片引用默认图片，然后把真实地址放在data-*属性上面。

<image src='./../assets/default.png' :data-src='item.allPics' class='lazyloadimg'>

然后是监听滚动，直接用window.onscroll就可以了，但是要注意一点的是类似于window的scroll和resize，还有mousemove这类触发很频繁的事件，最好用节流(throttle)或防抖函数(debounce)来控制一下触发频率。underscore和lodash里面都有封装这两个方法，这里先不多做介绍了。

接着要判断图片是否出现在了视窗里面，主要是三个高度：1，当前body从顶部滚动了多少距离。2，视窗的高度。3，当前图片距离顶部的距离。offsetTop相关属性可以参考这里，具体代码如下：

window.onscroll=_.throttle(this.watchscroll, 200);

watchscroll () {

var bodyScrollHeight=document.body.scrollTop;// body滚动高度
var windowHeight=window.innerHeight;// 视窗高度
var imgs=document.getElementsByClassName('lazyloadimg');
for (var i=0; i < imgs.length; i++) {
var imgHeight=imgs[i].offsetTop;// 图片距离顶部高度
if (imgHeight < windowHeight + bodyScrollHeight) {
imgs[i].src=imgs[i].getAttribute('data-src');
img[i].className=img[i].className.replace('lazyloadimg','')
}
}
}
学习交流加群：230354270

结语

大概内容就这么多了，下次可能会补充一下防抖节流源码的实现。最后再补充两个常见的滚动判断：

1.页面滚动离开首屏(这时可显示回到顶部的按钮):document.body.scrollTop > window.innerHeight

2.页面滚动到底部了(这时可去调接口获取更多内容)：window.scrollY + window.innerHeight > document.body.offsetHeight

于一些拥有大量图片的网站来说，如果一个页面有超过 50 张图片，就会造成网站页面加载太慢以及移动端耗费流量太大。就像前几天给理想做的作品页面，页面上至少200张图，为了解决这样的问题，可以使用LazyLoad按需加载，又称懒加载。

LazyLoad按需加载

做个笔记，图片如何实现懒加载（LazyLoad按需加载）

什么是LazyLoad按需加载

LazyLoad按需加载采用图片按需加载技术，打开页面时只会加载首屏图片。访客往下滚动时才会陆续加载需要展现的图片，这样非常高效，体验舒适。

做个笔记，图片如何实现懒加载（LazyLoad按需加载）

LazyLoad按需加载实现方法

我们在自己做网站时，也可以实现LazyLoad按需加载，增强网站的用户体验。下面学做网站论坛就来介绍一下LazyLoad按需加载实现方法。（以下会使用到HTML代码，如果对代码不熟悉，可以学习一下html视频教程）

引入LazyLoad按需加载必须的二个文件：jquery.js和jquery.lazyload.js。引入方法很简单，只需将下面的代码放到</head>标签上方即可；

<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script><script src="https://raw.githubusercontent.com/tuupola/jquery_lazyload/master/jquery.lazyload.min.js"></script>

做个笔记，图片如何实现懒加载（LazyLoad按需加载）

网站上所有图片都使用以下的格式书写：

<img class="lazy" src="" data-original="图片地址" width="100" height="100" alt="">

做个笔记，图片如何实现懒加载（LazyLoad按需加载）

在网站的</body>标签上面，放上以下的JS代码，来实现LazyLoad按需加载（懒加载）；

<script type="text/javascript">$(function() { $("img.lazy").lazyload({ threshold : 200, // 设置阀值 effect : "fadeIn" // 设置图片渐入特效 });});</script>

做个笔记，图片如何实现懒加载（LazyLoad按需加载）

这样，我们自己在建网站时，也可以轻松实现LazyLoad按需加载（懒加载）了。快去自己的网站上试试吧！

在线咨询

上一篇：只管来龙华买！这项补贴名额多多，最高达20000元
下一篇：JS的封装

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

如何深入理解JavaScript中的懒加载

介绍

懒加载的好处

JavaScript中实现延迟加载的技术

1、使用Intersection Observer API进行图片的懒加载

2. 滚动事件上的懒加载内容:

何时使用懒加载

懒加载的挑战

最佳实践

结束

言

实现原理

结语

LazyLoad按需加载

您的项目需求