脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → js 懒加载

JavaScript的懒加载处理的方式

 更新时间：2023年10月27日 10:38:26   作者：小猫娃来啦  
懒加载是一种优化技术,它可以延迟加载某些资源,直到它们真正需要被使用的时候才进行加载,实现懒加载的方法一般分为两种：基于 Intersection Observer API 的懒加载和基于滚动事件的懒加载,本文给大家介绍JavaScript的懒加载处理方式,感兴趣的朋友一起看看吧

什么是懒加载

懒加载（Lazy Loading）是一种优化技术，它可以延迟加载某些资源，直到它们真正需要被使用的时候才进行加载。这种技术可以提升应用程序或网站的性能，减少初始加载时间。

实现懒加载的方式

实现懒加载的方法一般分为两种：基于 Intersection Observer API 的懒加载和基于滚动事件的懒加载。
Intersection Observer API 是一个新的浏览器 API，它可以异步观察目标元素与其祖先元素或顶级文档视窗的交集情况。我们可以使用它来实现懒加载。

下面是一种实现懒加载的常见方式（Intersection Observer API）：

1.在HTML中标记需要延迟加载的元素，通常是图片、视频等资源。可以使用data属性或class来添加标记。

示例：

<img class="lazy" data-src="image.jpg" alt="Lazy-loaded Image">

2.使用JavaScript监听页面滚动事件或其他触发事件，检查需要加载的元素是否进入了可视区域。

使用Intersection Observer API：

// 观察器选项
const options = {
  root: null, // 默认为视窗
  rootMargin: '0px',
  threshold: 0.5 // 当目标元素50%可见时触发加载
};
const handleIntersection = (entries,) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
 // 加载目标元素
      const target = entry.target;
      target.src = target.dataset.src;
      observer.unobserve(target);
    }
  });
};
// 创建一个观察器实例
const observer = new IntersectionObserver(handleIntersection, options);
// 找到所有需要懒加载的元素并进行观察
const lazyElements = document.querySelectorAll('.lazy');
lazyElements.forEach(element => {
  observer.observe(element);
});

我们通过Intersection Observer API来监听目标元素是否进入可视区域，并在元素可见时将data-src属性的值赋给src属性来加载资源。观察器选项可以根据需求进行调整。

或者说，你也可以根据一定的步骤去实现

js四步法

设置占位图

在HTML中，将需要懒加载的图片的src属性设置为一个占位图，可以是一张小尺寸、模糊或单色的图片，表示图片正在加载。

<img src="placeholder.jpg" data-src="image-to-lazy-load.jpg" alt="Lazy-loaded Image">

监听滚动事件

使用JavaScript监听页面的滚动事件，当滚动事件触发时，判断懒加载图片是否进入了可视区域。

window.addEventListener('scroll', function() {
  // 判断懒加载图片是否进入可视区域
  // 如果图片进入可视区域，则触发加载图片的函数
});

加载图片

当懒加载图片进入可视区域时，将占位图的data-src属性值赋给src属性，从而触发加载图片。

function lazyLoad() {
  const lazyImages = document.querySelectorAll('img[data-src]');
  lazyImages.forEach(function(img) {
    if (isInViewport(img)) {
      img.src = img.dataset.src;
      img.removeAttribute('data-src');
    }
  });
}
function isInViewport(element) {
  var 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', function() {
  lazyLoad();
});

这也是一种实现懒加载的方式，但需要注意的是，在实际使用中可能需要根据具体情况进行适当的调整和优化，例如添加防抖和节流机制，处理图片加载失败等情况。同时，还可以使用现有的懒加载库来简化代码并实现更多功能。

到此这篇关于JavaScript的懒加载处理的文章就介绍到这了,更多相关js 懒加载内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

最新评论