JavaScript的懒加载处理

在这里插入图片描述

😘博主:小猫娃来啦
😘文章核心:JavaScript的懒加载处理

文章目录

    • 什么是懒加载
    • 实现懒加载的方式
    • js四步法
      • 设置占位图
      • 监听滚动事件
      • 加载图片
      • 触发加载函数

什么是懒加载

懒加载(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();
});

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

在这里插入图片描述


本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/102370.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

经典面试题第十二更---valueOf和toString

前言&#xff1a; &#x1f921; 作者简介&#xff1a;我是Morning&#xff0c;计算机的打工人&#xff0c;想要翻身做主人 &#x1f648; &#x1f648; &#x1f648; &#x1f3e0; 个人主页&#xff1a; Morning的主页 &#x1f4d5;系列专栏&#xff1a; 前端…

【opencv】windows10下opencv4.8.0-cuda C++版本源码编译教程

【opencv】windows10下opencv4.8.0-cuda C版本源码编译教程 提示:博主取舍了很多大佬的博文并亲测有效,分享笔记邀大家共同学习讨论 文章目录 【opencv】windows10下opencv4.8.0-cuda C版本源码编译教程前言准备工具cuda/cudnncmakeopencv4.8.0opencv_contrib CMake编译VS2019编…

文心一言 VS 讯飞星火 VS chatgpt (111)-- 算法导论10.2 2题

二、用go语言&#xff0c;用一个单链表 L实现一个栈。要求操作 PUSH和 POP 的运行时间仍为 O(1)。 文心一言&#xff1a; 在 Go 语言中&#xff0c;我们可以用结构体来实现一个单链表&#xff0c;然后再用栈的相关操作。 以下是一个可能的实现方式&#xff1a; package mai…

碰撞检测算法——分离轴算法在Unity中实现(二)

一、介绍 分离轴算法&#xff08;简称SAT&#xff09;通常用于检查两个简单多边形&#xff08;凸边形&#xff09;之间或多边形与圆之间的碰撞。本质上&#xff0c;如果您能够绘制一条线来分隔两个多边形&#xff0c;则它们不会发生碰撞&#xff0c;如果找不到一条线来分割两个…

力扣:129. 求根节点到叶节点数字之和(Python3)

题目&#xff1a; 给你一个二叉树的根节点 root &#xff0c;树中每个节点都存放有一个 0 到 9 之间的数字。 每条从根节点到叶节点的路径都代表一个数字&#xff1a; 例如&#xff0c;从根节点到叶节点的路径 1 -> 2 -> 3 表示数字 123 。 计算从根节点到叶节点生成的 所…

《概念解析》内容汇总 + 导航

本目录基于《概念解析》专栏已发布的文章分类整理生成,包含无线感知、计算机视觉、深度学习等多个技术主题。 该专栏旨在结合前沿论文,为读者提供无线感知、人工智能(AI)、信号处理等领域相关概念的简明扼要的解释和介绍,致力于简洁清晰地解释、辨析复杂而专业的概念。通过对专…

STM32CubeMX使用

一、新建工程 首先&#xff0c;打开STM32CubeMX&#xff0c;第一次使用的朋友可以点击右侧的CHECK FOR UPDATE和INSTALL/REMOVE检查一下软件更新并且找到对应芯片的固件库然后下载&#xff0c;软件和固件库都推荐是使用最新版的&#xff0c;这里不多介绍。 完毕之后点击File-&…

信创之国产浪潮电脑+统信UOS操作系统体验4:visual studio code中怎么显示中文

☞ ░ 前往老猿Python博客 ░ https://blog.csdn.net/LaoYuanPython 一、引言 今天在vscode中打开以前的一段C代码&#xff0c;其中的中文显示为乱码&#xff0c;如图所示&#xff1a; 而在统信文本编辑器打开是正常的&#xff0c;打开所有菜单&#xff0c;没有找到相关配置…

《进化优化》第3章 遗传算法

文章目录 3.1 遗传学的历史3.2 遗传学3.3 遗传学的历史3.4 一个简单的二进制遗传算法3.4.1 用于机器人设计的遗传算法3.4.2 选择与交叉3.4.3 变异3.4.5 遗传算法参数调试 3.5 简单的连续遗传算法 遗传算法模仿自然选择来解决优化问题。 为研究遗传算法&#xff0c;得遵守自然选…

医疗产品方案|智能蓝牙血压计方案

智能蓝牙血压计主要测量指标分别为脉率&#xff0c;收缩压和舒张压。血压和脉率是临床医疗上血液动力学分析的重要指标。 智能蓝牙血压计整个方案采用SIC32F911RET6作为整机血压测量显示的控制芯片&#xff0c;通过单片机程序开发设计而成&#xff0c;主要组成结构是传感器、充…

进来了解实现官网搜索引擎的三种方法

做网站的目的是对自己的品牌进行推广&#xff0c;让越来越多的人知道自己的产品&#xff0c;但是如果只是做了一个网站放着&#xff0c;然后等着生意找上门来那是不可能的。在当今数字时代&#xff0c;实现官网搜索引擎对于提升用户体验和推动整体性能至关重要。搜索引擎可以帮…

深入理解强化学习——标准强化学习和深度强化学习

分类目录&#xff1a;《深入理解强化学习》总目录 强化学习的历史 早期的强化学习&#xff0c;我们称其为标准强化学习。最近业界把强化学习与深度学习结合起来&#xff0c;就形成了深度强化学习&#xff08;Deep ReinforcemetLearning&#xff09;。因此&#xff0c;深度强化…

代理IP、Socks5代理与网络工程:解析技术世界的无限可能

在当今数字化的世界中&#xff0c;网络工程师不仅需要保证网络的稳定性&#xff0c;还要应对多样的技术挑战。代理IP和Socks5代理技术已经成为网络工程师工具箱中不可或缺的利器&#xff0c;在跨界电商、爬虫、出海、网络安全、游戏等领域发挥关键作用。本文将深入探讨这两项技…

试图带你一文搞懂transformer注意力机制(Self-Attention)的本质

这篇文章主要想搞懂以下几个问题&#xff1a; 1、什么是自注意力&#xff08;Self-Attention&#xff09; 2、Q,K,V是什么 好了废话不多说&#xff0c;直接进入正题 Q,K,V分别代表query&#xff0c;key和value&#xff0c;这很容易让人联想到python的字典数据结构&#xff…

记一个带批注、表头样式的导入导出excel方法(基于easyexcel)

技术栈&#xff1a;easyexcel-2.2.10&#xff0c;poi-4.1.2&#xff0c;lombok&#xff0c;hutool-5.8.19&#xff1b;公司自用导入导出方法&#xff0c;可能不是那么的优雅&#xff0c;但胜在稳定实用。 /*** Author 955* Date 2023-10-10 11:52* Description 错误批注信息对…

superset支持Kylin4.0.0(兼容处理日期分组功能)

问题总结 1. superset默认不支持kylin数据源 安装kylinpy pip install kylinpy 2. 安装kylin驱动后,无法连接kylin地址 修改site-packages/kylinpy/sqla_dialect.py文件 2.1 注释一下内容 #def _compose_select_body(self, text, select, inner_columns, froms, byfrom, …

Ghidra101再入门(上?)-Ghidra架构介绍

Ghidra101再入门(上&#xff1f;)-Ghidra架构介绍 最近有群友问我&#xff0c;说&#xff1a;“用了很多年的IDA&#xff0c;最近想看看Ghidra&#xff0c;这应该怎么进行入门&#xff1f;“这可难到我了。。 我发现&#xff0c;市面上虽然介绍Ghidra怎么用的文章和书籍很多&…

C++ 使用Windows的API CreateDirectory 创建多层级文件夹

简介 使用Windows的API创建多层级文件夹 效果 代码 #include <windows.h> #include <direct.h> #include <iostream> #include <string> #include <sstream> #include <vector> //创建多层级文件夹 bool CreateDir(const std:…

【算法-动态规划】0-1 背包问题

&#x1f49d;&#x1f49d;&#x1f49d;欢迎来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐:kuan 的首页,持续学…

APT攻击与零日漏洞

APT攻击 当谈到网络安全时&#xff0c;APT&#xff08;高级持续性威胁&#xff09;攻击是最为复杂和难以检测的攻击类型之一。APT攻击通常涉及到高度的技术和策略性&#xff0c;而且它们的目标是深入地渗透和长时间地隐藏在目标网络中。 1. 什么是APT攻击&#xff1f; 高级持续…