| 超详细的图片预加载和懒加载教程 | 您所在的位置：网站首页 › axios懒加载 › 超详细的图片预加载和懒加载教程 |
超详细的图片预加载和懒加载教程
|
最近接手一个项目 。 结果光安装依赖都出现了一堆 麻烦 。 好不容易处理完一个 ， 又来一个 。头疼啊 看到之前有一些预加载的学习笔记。于是又查查找找 ，想想写写 把预加载和懒加载的笔记写完整 发现制图挺麻烦的！不知道你们有没有什么推荐？ 写了挺久的这篇文章，有什么不对的地方欢迎评论或私聊指出 图片的预加载和懒加载预加载和懒加载的字眼总会看到 。 其实预加载和懒加载不仅仅是用于加载图片资源。其他资源，文字，视频。都可以。 我们较常用或较需要使用的场景就是加载图片资源。 这里，我们也只讨论加载图片资源。 图片预加载 什么是图片的预加载？提前加载所需要的图片资源，加载完毕后会缓存到本地，当需要时可以立马显示出来，以达到在预览的过程中，无需等待直接预览的良好体验。 简而言之 ： 就是需要显示前先加载 什么场景可能需要使用预加载 漫画我们知道漫画是一张一张连续的图片组成 。我们在看漫画时，也是一张一张看的。 但如果当我们看完一张，切换到下一张时再加载图片，那么就会有一段空白的加载时间。而且漫画图片一般比较大，如果网络不是很好，那么加载时间就会比较久。体验就会下降。
正如图片所示，如果我们看完 2 了 ，想看 3 ，3 却还没加载完就会大大降低体验感。 而如果能在我们预览 2 这段时间里就提前加载好 3 ， 等到我们看 3 时就直接里面显示。那么就体验会好很多。 图片画廊希望用户预览图片时能够顺畅 ，而不是看到下一页的图片了，上一页的还没加载出来。 与漫画类似，但加载的图片资源会比较多。 或者其他加载会比较耗时但不希望让用户看到加载时空白的场景如要一次性显示好几张图片 ，如果让用户在看的时候加载，那么图片先后显示的过程，和出现空白的现象会让用户看见。 特别是网络不好时，用户看见空白不知道是根本没有图片，还是加载不出来。
如果我们使用预加载，先显示一个进度条，告诉用户加载了多少了，当加载了百分之百后再一起全部显示出来。 那么用户起码不会看到空白，也知道是在加载中，并且根据进度条能大概判断一下加载速度。那么体验就会上升。 预加载的缺点预加载会占用较多的后台资源，因为可能一次性加载较多的图片 预加载需要比较长的时间 ，一般是利用用户进行其他操作时进行。（如漫画是在用户看上一个图片时进行预加载 ） 。 或者是在等待的这段时间显示其他。（如显示进度条。） 图片预加载的方法这里介绍两个常用且实用的方法 。每个方法都有优缺点 。 也有自己使用的场景。我们应该根据实际选择合适的方法 1. 通过 CSS 步骤 创建用来预加载的标签给标签使用背景图，背景图的路径是需要预加载的图片资源。并且将图片移到看不见的地方，或缩小到看不见。不能用 display=none , 否则预加载会失效当使用到已经预加载好的图片时，会直接使用缓存好的图片资源，而不需要向服务器发送请求。 demo CSS 预加载 显示 var show = function () { // 点击 ul 里的标签 ，显示图片 document.querySelector("ul").innerHTML = `
 `
}
/* 预加载样式文件 */
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 (表示本地资源)
|
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-MnO4gfyt-1630744528325)(C:\Users\Administrator\Desktop\桌面\前端\预加载大量图片.png)]](https://img-blog.csdnimg.cn/3d8cb197db914c1e993c911bd73c1056.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA6L-Z5LiN6LCB6LCB6LCB5Zib77yf,size_17,color_FFFFFF,t_70,g_se,x_16)
【本文地址】