1、通过写函数进行预加载
function preload(arrayOfImages) {
$(arrayOfImages).each(function(){
$('<img/>')[0].src = this//循环加载传进来的图片数组
})
}
调用方法:
preload([
'img/imageName.jpg', //图片1
'img/anotherOne.jpg',//图片2
'img/blahblahblah.jpg'//图片3
])
2、通过插件的方式预加载
//自定义函数preload,实现原理跟方法一差不多
$.fn.preload = function() {
this.each(function(){
$('<img/>')[0].src = this
})
}
调用方法:
$(['img1.jpg','img2.jpg','img3.jpg']).preload()
在项目中引入 js 文件一般是如下这种模式:
懒加载:
当文件被需要时才被加载即 执行fn()时,多次执行fn()只会加载一次js文件
预加载:
文件会在浏览器空闲的时候提前加载,有兼容性问题需慎用