图片预加载
# 图片预加载
提前加载所需要的图片资源,加载完毕后会缓存到本地,当需要时可以立马显示出来,以达到在预览的过程中,无需等待直接预览的良好体验。
图片预加载分类:
- 无序加载
- 有序加载
预加载的缺点:
预加载会占用较多的后台资源,因为可能一次性加载较多的图片
预加载需要比较长的时间 ,一般是利用用户进行其他操作时进行。(如漫画是在用户看上一个图片时进行预加载 ) 。 或者是在等待的这段时间显示其他。(如显示进度条。)
# 图片预加载方案
# 利用 CSS 实现预加载
该方法只需将欲加载的图片 url 写入某个隐藏元素的 background 属性中,让这张图片和 CSS 文件同时加载。当用户触发显示图片的事件时,再将图片插入到目标位置。
如下代码所示,这里用到 CSS3 的 background 多图片特性,只需一个隐藏元素即可预加载所有图片。
.nothing-1 {
display: none;
background: url("1.jpg"), url("2.jpg"), url("3.jpg");
}
1
2
3
4
2
3
4
该方法的缺点在于无法控制预加载的时机,只能是页面加载时一起加载图片,如果图片过多,会阻塞页面的 load 事件,延长页面加载时间。
# 只利用 JavaScript 实现预加载
直接使用 JavaScript 新建 Image 对象,对其 src 属性赋值。
var image = new Image();
image.src = '...img url';
image.onload = function() { ... }
image.onerror = function () { ... }
1
2
3
4
2
3
4
还可以利用 Image 对象的 load 事件和 error 事件,完成图片预加载和失败之后的处理,如所有图片加载完成后的提示等。
# 利用 Ajax 实现预加载
直接发送 ajax 请求,获取图片资源。同样,可将 ajax 请求成功与失败的回调,作为图片预加载成功与失败的处理。
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState == 4) {
if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {
...
}
}
}
xhr.open("GET", '...img url');
xhr.send('');
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
Ajax 请求方法无需多余的 Image 对象,而且获取的资源也不仅局限于图片。
更新时间: 1/14/2022, 6:21:39 PM