前端-懒加载

news2024/11/14 12:06:45

目录

1.懒加载的概念

2.懒加载的特点

3.懒加载的实现原理

4.懒加载与预加载的区别

5.懒加载实现

6.预加载实现


1.懒加载的概念

懒加载也加延迟加载、按需加载,指在长网页中延迟加载图片数据,是一种较好的网页性能优化的方式。

2.懒加载的特点

(1)减少了无用资源的加载

(2)提升用户体验

(3)防止加载过多图片而影响其他资源文件的加载

3.懒加载的实现原理

图片的加载是由src引起的,当对src赋值时,浏览器就会请求图片资源。

根据这个原理,我们使用HTML5的data-src属性来存储图片的路径,在需要加载图片时,将data-src中的图片路径赋值给src,这样样思想按需加载,即懒加载。

实现原理:

window.innerHeight是浏览器可视区的高度

document.body.scrollTop || document.documentElement.scrollTop是浏览器滚动过的距离

imgs.offsetTop是元素顶部距离文档顶部的高度(包括了滚动条的距离)

图片加载条件:imgs.offsetTop<window.innerHeight+document.body.scrollTop

4.懒加载与预加载的区别

两者都是提升网页性能的方式,主要区别是一个迟缓甚至不加载,一个是提前加载。

懒加载是延迟加载,指的是在长网页中当用户需要去访问时,再去加载。

预加载指的是将所需的资源提前请求加载到本地,后面需要用时直接从缓存中取资源。

懒加载预加载
加载时机用户需要时(如滚动到页面某个位置)页面加载过程中或加载完成前
目的减少初始加载时间,提高页面加载速度,缓解服务器前端压力加快页面内容的呈现速度,提升页面切换速度和流畅度
应用场景长滚动页面、资源密集型网站关键资源加载、预测用户行为
对服务器压力减轻增加(但换取更好的用户体验)

5.懒加载实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片性能优化——懒加载</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .container {
            width: 100%;
            height: 9000px;
            background-color: antiquewhite;
        }
    </style>
</head>
<body>
    <!-- 图片加载条件:imgs.offsetTop<window.innerHeight+document.body.scrollTop -->
    <div class="container">
        <img src="loading.gif" data-src="./images/01.jpg">
        <img src="loading.gif" data-src="./images/02.jpg">
        <img src="loading.gif" data-src="./images/03.jpg">
        <img src="loading.gif" data-src="./images/04.jpg">
        <img src="loading.gif" data-src="./images/05.jpg">
        <img src="loading.gif" data-src="./images/06.jpg">
        <img src="loading.gif" data-src="./images/lanrenzhijia1.jpg">
        <img src="loading.gif" data-src="./images/lanrenzhijia2.jpg">
        <img src="loading.gif" data-src="./images/lanrenzhijia3.jpg">
        <img src="loading.gif" data-src="./images/lanrenzhijia4.jpg">
        <img src="loading.gif" data-src="./images/lanrenzhijia5.jpg">
        <img src="loading.gif" data-src="./images/lanrenzhijia6.jpg">
    </div>
    <script>
        console.log("浏览器可视区的高度",window.innerHeight);
        console.log("浏览器滚动过的距离",document.body.scrollTop,document.documentElement.scrollTop);
        let imgs=document.querySelectorAll("img");
        function lazyLoad(){
            let scrollTop=document.body.scrollTop||document.documentElement.scrollTop; //浏览器滚动过的距离
            let winHeight=window.innerHeight;
            for(let i=0;i<imgs.length;i++){
                if(imgs[i].offsetTop<scrollTop+winHeight){
                    imgs[i].src=imgs[i].getAttribute("data-src");
                    console.log(imgs[i].offsetTop,scrollTop,winHeight);
                    console.log(`第${i}张图片出来了`);
                }
            }
        }
        window.onscroll=lazyLoad;
    </script>
</body>
</html>

6.预加载实现

在HTML文档的<head>部分或<body>的底部(确保在DOM元素之前或之后),我们可以使用JavaScript来创建新的Image对象,并设置它们的src属性为要预加载的图片URL。浏览器就会在页面加载过程中提前下载这些图片。

<script>  
function preloadImages(urls) {  
    if (!preloadImages.list) {  
        preloadImages.list = [];  
    }  
    for (var i = 0; i < urls.length; i++) {  
        var img = new Image();  
        img.onload = function() {  
            var index = preloadImages.list.indexOf(this);  
            if (index !== -1) {  
                // 可选:加载完成后的回调处理  
                console.log('Image ' + (index + 1) + ' loaded');  
                // 移除已加载的图片引用,避免内存泄漏(可选)  
                preloadImages.list.splice(index, 1);  
            }  
        };  
        img.onerror = function() {  
            console.error('Failed to load image ' + this.src);  
        };  
        preloadImages.list.push(img);  
        img.src = urls[i];  
    }  
}  

// 调用预加载函数,传入图片URL数组  
preloadImages(['img1.jpg', 'img2.jpg', 'img3.jpg', 'img4.jpg']);  
</script>

若文章对你有帮助,点个赞吧!

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

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

相关文章

uniapp 实现瀑布流

效果演示 组件下载 瀑布流布局-waterfall - DCloud 插件市场

若依后端项目打包镜像部署

添加打包依赖 <build><finalName>${project.artifactId}</finalName><plugins><plugin><groupId>org.springframework.boot</groupId><artifactId>spring-boot-maven-plugin</artifactId><executions><executi…

使用Python实现音频降噪

在音频处理领域&#xff0c;背景噪声是一个常见的问题。为了提高音频的质量&#xff0c;我们需要对音频进行降噪处理。本文将介绍如何使用 Python 实现音频降噪。 依赖库安装 在开始之前&#xff0c;我们需要安装以下依赖库&#xff1a; pydub&#xff1a;用于音频文件的读取…

18、论文阅读:AOD-Net:一体化除雾网络

AOD-Net: All-in-One Dehazing Network 前言介绍相关工作物理模型传统方法深度学习方法 建模与扩展变换后的公式网络设计与高级特征任务相结合 除雾评价数据集和实现 前言 该论文提出了一种基于卷积神经网络&#xff08;CNN&#xff09;的图像去雾模型&#xff0c;称为 All-in…

软件工程。

图 UML 数据流图&#xff08;DFD&#xff09; 1&#xff0c;数据流图概念 描绘信息流和数据从输入移动到输出的过程中所经受的变换。 也就是 数据流图。 数据流图以图形的方式描绘数据在系统中流动和处理的过程。 数据流图&#xff08;DFD&#xff0c;Data Flow Diagram&a…

机器学习—为什么我们需要激活函数

如果我们使用神经网络中每个神经元的线性激活函数&#xff0c;回想一下这个需求预测示例&#xff0c;如果对所有节点使用线性激活函数&#xff0c;在这个神经网络中&#xff0c;事实证明&#xff0c;这个大神经网络将变得与线性回归没有什么不同&#xff0c;所以这将挫败使用神…

Java基础使用②Java数据变量和类型+小知识点

目录 1. Java小知识点 1.1 Java注释 1.2 Java标识符命名 1.3 Java关键字 2. 字面常量和数据变量 2.1 字面常量 2.2 数据类型 3.变量 3.1 变量概念 3.2 语法格式 3.3 整型变量 3.4 浮点型变量 3.5 字符型变量 3.6 布尔型变量 3.7 类型转换 3.8 类型提升 4. 字符…

Blender 几何、线框猴头的构建 笔记

一、学习blender视频教程链接 案例7&#xff1a;猴头构建_建模动画_哔哩哔哩_bilibilihttps://www.bilibili.com/video/BV1Bt4y1E7qn?spm_id_from333.788.videopod.episodes&vd_sourced0ea58f1127eed138a4ba5421c577eb1&p23 二、几何节点基础教程 1.首先添加几何节…

Kafka面试题解答(二)

1.怎么尽可能保证 Kafka 的可靠性 kafka是可能会出现数据丢失问题的&#xff0c;Leader维护了一个动态的in-sync replica set&#xff08;ISR&#xff09;&#xff0c;意为和 Leader保持同步的FollowerLeader集合(leader&#xff1a;0&#xff0c;isr:0,1,2)。 如果Follower长…

用科技力量,重塑数字化园区新生态!

数字化园区的成功打造绝非易事&#xff0c;它需要在多个关键层面付出持之以恒的努力&#xff0c;而成都树莓集团在这一进程中无疑发挥着重要作用。 在数据的管理与应用方面&#xff0c;成都树莓集团更是展现出卓越的实力。集团运用先进的数据挖掘、分析技术&#xff0c;助力园区…

Mac上无法访问usr/local的文件

sudo chmod 755 /usr/loca 最后用百度提供的方法解决了

【Lucene】原理学习路线

基于《Lucene原理与代码分析完整版》&#xff0c;借助chatgpt等大模型&#xff0c;制定了一个系统学习Lucene原理的计划&#xff0c;并将每个阶段的学习内容组织成专栏文章&#xff0c;zero2hero 手搓 Lucene的核心概念和实现细节。 深入的学习和专栏计划&#xff0c;覆盖Lucen…

友思特应用 | 动态捕捉:高光谱相机用于移动产线上的食品检测

导读 高光谱成像技术能够为食品安全助力。以友思特BlackIndustry SWIR 1.7 Max 为代表的高光谱相机&#xff0c;完美解决了移动产线检测的应用难点。 高光谱技术&#xff1a;为食品安全保驾护航 食品安全一直是大众关心的热点话题&#xff0c;提供安全、高质量的食品需要对食…

HarmonyOS使用arkTS拉起指定第三方应用程序

HarmonyOS使用arkTS拉起指定第三方应用程序 前言代码及说明bundleName获取abilityName获取 前言 本篇只说采用startAbility方式拉起第三方应用&#xff0c;需要用到两个必备的参数bundleName&#xff0c;abilityName&#xff0c;本篇就介绍如何获取参数… 代码及说明 bundle…

Linux的基本指令(一)

1.ls指令 功能&#xff1a;对于目录&#xff0c;该命令列出该目录下的所有子目录与文件。对于文件&#xff0c;将列出文件名以及信息。 常用选项&#xff1a; -a列出目录下的所有文件&#xff0c;包括以 . 开头的隐含文件。 -l列出文件的详细信息 举例&#xff1a; rooti…

基于Springboot+Vue的博客系统 (含源码数据库)

1.开发环境 开发系统:Windows10/11 架构模式:MVC/前后端分离 JDK版本: Java JDK1.8 开发工具:IDEA 数据库版本: mysql5.7或8.0 数据库可视化工具: navicat 服务器: SpringBoot自带 apache tomcat 主要技术: Java,Springboot,mybatis,mysql,vue 2.视频演示地址 3.功能 这个系…

华为OD机试真题-矩形绘制

题目描述 实现一个简单的绘图模块&#xff0c;绘图模块仅支持矩形的绘制和擦除 当新绘制的矩形与之前的图形重善时&#xff0c;对图形取并集 当新擦除的矩形与之前的图形重善时&#xff0c;对图形取差集 给定一系列矩形的绘制和擦除操作&#xff0c;计算最终图形的面积。下…

数据编排与ETL有什么关系?

数据编排作为近期比较有热度的一个话题&#xff0c;讨论度比较高&#xff0c;同时数据编排的出现也暗示着数字化进程的自动化发展。在谈及数据编排时&#xff0c;通常也会谈到ETL&#xff0c;这两个东西有相似点也有不同点。 数据编排和ETL&#xff08;提取、转换、加载&#x…

【Golang】Go语言教程

Go语言教程 文章目录 Go语言教程一、Go语言教程二、Go语言特色三、Go语言用途四、第一个Go程序六、运行代码的两种方式七、go run和go buil的区别7.1、go run7.2、Go build 一、Go语言教程 Go全称Golang Go是一个开源的编程语言&#xff0c;它能让构造简单、可靠且高效的软件变…

【重装系统后重新配置2】pycharm 终端无法激活conda环境

pycharm 终端无法激活 conda 环境&#xff0c;但是 Windows本地终端是可以激活的 原因是pycharm 默认的终端是 Windows PowerShell 解决方法有两个&#xff1a; 一、在设置里&#xff0c;修改为cmd 二、下面直接选择