JavaScript的懒加载处理

在这里插入图片描述

😘博主:小猫娃来啦
😘文章核心: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">
  1. 使用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();
});

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

在这里插入图片描述


Whisper是一款可以实现语音识别转文字的应用软件。它可以通过下载安装在手机或电脑上,实现将语音转化为文字的功能。 使用Whisper进行语音识别转文字非常简便。首先,用户需要下载并安装Whisper应用,可以在各大应用商店或官方网站上获取。安装完成后,用户可以打开应用,并按照界面上的提示进行设置和授权。接下来,用户可以开始使用Whisper进行语音转文字的操作。 在使用Whisper进行语音识别转文字时,用户可以选择两种方式。一种是通过录制语音进行识别,用户只需按下录制按钮,开始说话,Whisper会自动将语音转化为文字。另一种方式是通过实时语音输入进行识别,用户可以直接讲话到麦克风,Whisper会实时将语音转为文字显示在屏幕上。 Whisper语音识别转文字功能非常准确和快速。它采用了先进的语音识别技术,能够准确地识别各种语音,并将其转化为文字。同时,Whisper还支持多国语言的识别,可以满足不同用户的需求。 通过Whisper进行语音识别转文字,用户可以享受到很多便利。无论是需要记录会议内容、学习笔记,还是进行语音交流的转化,Whisper都能够帮助用户快速准确地将语音转化为文字,并保存在手机或电脑上。这样,用户可以方便地进行查看、编辑和分享。 总之,Whisper是一个功能强大、操作简便的语音识别转文字应用软件,通过下载安装,用户可以随时随地将语音转化为文字,提高工作和学习的效率。
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

小猫娃来啦

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值