类似H5和一些动画元素都需要提前加载完一些图片
如果图片在使用之前就已经请求过了,
那么再次使用的时候,就不会再去请求(ps:图片路径一样)。
1.使用纯的css进行图片预加载
body:after {
content: "";
display: block;
position: absolute;
background:
url("../image/manage/help/01.png") no-repeat -10000px -1000px,
url("../image/manage/help/02.png") no-repeat -10000px -1000px,
url("../image/manage/help/03.png") no-repeat -10000px -1000px,
url("../image/manage/help/04.png") no-repeat -10000px -1000px,
url("../image/manage/help/05.png") no-repeat -10000px -1000px,
width: 0;
height: 0
}
2.使用纯javascript进行图片预加载
(function(){
var imgSrcArr = [
'image/1.png',
'image/2.png',
'image/3.png',
'image/4.png',
'image/5.png',
'image/6.png',
'image/7.png'
];
var imgWrap = [];
function preloadImg(arr) {
for(var i =0; i< arr.length ;i++) {
imgWrap[i] = new Image();
imgWrap[i].src = arr[i];
}
}
setTimeout(function(){preloadImg(imgSrcArr)},5000)
}());
3.使用css+js方式进行图片预加载
.preload-img:after{
content: "";
display: block;
position: absolute;
background:
url("../image/manage/help/01.png") no-repeat -10000px -1000px,
url("../image/manage/help/02.png") no-repeat -10000px -1000px,
url("../image/manage/help/03.png") no-repeat -10000px -1000px,
url("../image/manage/help/04.png") no-repeat -10000px -1000px,
url("../image/manage/help/05.png") no-repeat -10000px -1000px,
width: 0;
height: 0
}
/*
比如我们写了上面的这样一个类,但是页面中没有用到,我们在文档加载完毕之后,给某个元素添加该类
*/
$("#target").addClass("preload-img")
4.使用ajax方式进行图片预加载
$.get('https://www.baidu.com/imgres.jpg');