超详细的图片预加载和懒加载教程

无糖的酸奶

已于 2022-03-19 20:26:51 修改

阅读量8.4k

点赞数 19

分类专栏：前端优化文章标签：预加载懒加载前端前端优化

于 2021-09-04 16:59:31 首次发布

本文链接：https://blog.csdn.net/nihoajy/article/details/120102022

版权

本文详细介绍了图片预加载和懒加载的概念、应用场景、优缺点及实现方法，包括CSS和JavaScript实现预加载，以及懒加载的原理、检测图片显示的方法和优化策略。适用于前端开发人员提升用户体验。

摘要由CSDN通过智能技术生成

最近接手一个项目。结果光安装依赖都出现了一堆麻烦。
好不容易处理完一个，又来一个。头疼啊
看到之前有一些预加载的学习笔记。于是又查查找找，想想写写把预加载和懒加载的笔记写完整
发现制图挺麻烦的！不知道你们有没有什么推荐？
写了挺久的这篇文章，有什么不对的地方欢迎评论或私聊指出

图片的预加载和懒加载

预加载和懒加载的字眼总会看到。其实预加载和懒加载不仅仅是用于加载图片资源。其他资源，文字，视频。都可以。

我们较常用或较需要使用的场景就是加载图片资源。

这里，我们也只讨论加载图片资源。

图片预加载

什么是图片的预加载？

提前加载所需要的图片资源，加载完毕后会缓存到本地，当需要时可以立马显示出来，以达到在预览的过程中，无需等待直接预览的良好体验。

简而言之：就是需要显示前先加载

什么场景可能需要使用预加载

漫画

我们知道漫画是一张一张连续的图片组成。我们在看漫画时，也是一张一张看的。

但如果当我们看完一张，切换到下一张时再加载图片，那么就会有一段空白的加载时间。而且漫画图片一般比较大，如果网络不是很好，那么加载时间就会比较久。体验就会下降。

在这里插入图片描述

正如图片所示，如果我们看完 2 了，想看 3 ，3 却还没加载完就会大大降低体验感。

而如果能在我们预览 2 这段时间里就提前加载好 3 ，等到我们看 3 时就直接里面显示。那么就体验会好很多。

图片画廊

希望用户预览图片时能够顺畅，而不是看到下一页的图片了，上一页的还没加载出来。

与漫画类似，但加载的图片资源会比较多。

或者其他加载会比较耗时但不希望让用户看到加载时空白的场景

如要一次性显示好几张图片，如果让用户在看的时候加载，那么图片先后显示的过程，和出现空白的现象会让用户看见。

特别是网络不好时，用户看见空白不知道是根本没有图片，还是加载不出来。

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-MnO4gfyt-1630744528325)(C:\Users\Administrator\Desktop\桌面\前端\预加载大量图片.png)]$

如果我们使用预加载，先显示一个进度条，告诉用户加载了多少了，当加载了百分之百后再一起全部显示出来。

那么用户起码不会看到空白，也知道是在加载中，并且根据进度条能大概判断一下加载速度。那么体验就会上升。

预加载的缺点

预加载会占用较多的后台资源，因为可能一次性加载较多的图片
预加载需要比较长的时间，一般是利用用户进行其他操作时进行。（如漫画是在用户看上一个图片时进行预加载 ）。或者是在等待的这段时间显示其他。（如显示进度条。）

图片预加载的方法

这里介绍两个常用且实用的方法。每个方法都有优缺点。也有自己使用的场景。我们应该根据实际选择合适的方法

1. 通过 CSS

步骤

创建用来预加载的标签
给标签使用背景图，背景图的路径是需要预加载的图片资源。并且将图片移到看不见的地方，或缩小到看不见。不能用 display=none , 否则预加载会失效
当使用到已经预加载好的图片时，会直接使用缓存好的图片资源，而不需要向服务器发送请求。

demo

<!--HTML文件  -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS 预加载</title>
    
    <!-- 引入预加载样式文件 -->
    <link rel="stylesheet" href="./preLoad.css">
    
</head>
<body>
    <!-- 点击时显示图片  -->
    <button οnclick="show()">显示</button>
    
    <ul>
        <!-- 用来预加载的标签  -->
        <li id="preImg1"/>
        <li  id="preImg2"/>
        <li sid="preImg3"/>
    </ul>
</body>
<script>
    var show = function () {
        // 点击 ul 里的标签 ，显示图片
        document.querySelector("ul").innerHTML = `
        <li><img src="https://img1.baidu.com/it/u=3263944338,3726722345&fm=26&fmt=auto&gp=0.jpg"></li>
        <li><img src="https://img2.baidu.com/it/u=2480106139,2144834787&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=552"></li>
        <li><img src="https://img1.baidu.com/it/u=1904128529,1389594536&fm=26&fmt=auto&gp=0.jpg"></li>`
    }
</script>
</html>

/* 预加载样式文件 */
img {
   
    width: 200px;
}
/* 预加载文件 */
#preImg1 {
   
    background-image: url('https://img1.baidu.com/it/u=3263944338,3726722345&fm=26&fmt=auto&gp=0.jpg');
    width: 0;
    height: 0;  /* 隐藏用来预加载的标签 */
}

#preImg2 {
   
    background-image: url('https://img2.baidu.com/it/u=2480106139,2144834787&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=552');
    width: 0;
    height: 0;
}

#preImg3 {
   
    background-image: url('https://img1.baidu.com/it/u=1904128529,1389594536&fm=26&fmt=auto&gp=0.jpg');
    width: 0;
    height: 0;
}

分析：

在游览器第一次打开这个文档时，加载 CSS 过程中遇到需要加载的背景图片资源，于是会发送请求到服务器，服务器返回图片资源，游览器本地缓存。

在游览器的开发者根据（F12）的 NewWork 项我们可以看到请求码是 200 。是服务器返回的新的响应。

请添加图片描述

此时我们先清空游览器请求资源记录

在这里插入图片描述

然后点击显示按钮，将填写了 src 的图片标签放到文档中。显示图片

在这里插入图片描述

图片里面显示，而 newWork 栏里也没有向服务器发送新的请求，因为服务器就有缓存。即使有状态码也是 304 (表示本地资源)

在这里插入图片描述

2. 通过 JavaScript

步骤

将需要预加载的图片资源的 URL 保存在数组里
循环遍历 URL 数组执行以下步骤，直到结束
创建一个 image 对象 new Image()
将 image 对象的 src 属性的值指定为预加载图片的 URL

demo

<!-- HTML 文件 -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>JS 预加载</title>
    <!-- 简单的样式，不用关注 -->

最低0.47元/天解锁文章

无糖的酸奶

关注

19
点赞
踩
80

收藏

觉得还不错? 一键收藏
打赏
2
评论
超详细的图片预加载和懒加载教程

最近接手一个项目。结果光安装依赖都出现了一堆麻烦。好不容易处理完一个，又来一个。头疼啊看到之前有一些预加载的学习笔记。于是又查查找找，想想写写把预加载和懒加载的笔记写完整发现制图挺麻烦的！不知道你们有没有什么推荐？写了挺久的这篇文章，有什么不对的地方欢迎评论或私聊指出图片的预加载和懒加载预加载和懒加载的字眼总会看到。其实预加载和懒加载不仅仅是用于加载图片资源。其他资源，文字，视频。都可以。我们较常用或较需要使用的场景就是加载图片资源。这里，我们也只讨论加载图片资源。.
复制链接

扫一扫