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

JavaScript05

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

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

懒加载:

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

预加载:

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

jquery加载页面的方法(页面加载完成就执行),看下windows.onload$(document).ready之间的区别。

1、$(function(){

$("#a").click(function(){

//adding your code here

})

})

2、$(document).ready(function(){

$("#a").click(function(){

//adding your code here

})

})

3、window.onload = function(){

$("#a").click(function(){

//adding your code here

})

}

html代码为<input

type="button" id="a">点击</input>,且页面需要引用jquery的js文件

一般的加载页面时调用js方法如下:

window.onload = function() {

$("table

tr:nth-child(even)").addClass("even")//这个是jquery代码

}

这段代码会在整个页面的document全部加载完成以后执行。不幸的这种方式不仅要求页面的DOM

tree全部加载完成,而且要求所有的外部图片和资源全部加载完成。更不幸的是,如果外部资源,例如图片需要很长时间来加载,那么这个js效果就会让用户感觉失效了。

但是用jquery的方法:

$(document).ready(function() {

//

任何需要执行的js特效

$("table tr:nth-child(even)").addClass("even")

})

就仅仅只需要加载所有的DOM结构,在浏览器把所有的HTML放入DOM tree之前就执行js效果。包括在加载外部图片和资源之前。

还有一种简写的方式:

$(function() {

// 任何需要执行的js特效

$("table

tr:nth-child(even)").addClass("even")

})

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