教你 Jsimport 如何实现 懒加载 和 预加载

JavaScript09

教你 Jsimport 如何实现 懒加载 和 预加载,第1张

在项目中引入 js 文件一般是如下这种模式:

懒加载:

当文件被需要时才被加载即 执行fn()时,多次执行fn()只会加载一次js文件

预加载:

文件会在浏览器空闲的时候提前加载,有兼容性问题需慎用

jquery预加载的两种方式说明如下:

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()

图片不的SRC地址不填真实地址,填loading图片(就是转圈的图片)地址,把真实的图片地址放到图片的title或者alt或者其它自定义属性上,然后在页面的onload 事件中(js),用是js遍历所有图片,然后预加载图片地址,加载完成后,把真实地址从title或者alt或者其它自定义属性上赋到src上即可,明天白天给你示例,留邮箱我