在项目中引入 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")
})
预加载图片是提高用户体验的一个很好方法。图片预先加载到浏览器中，这对图片画廊及图片占据很大比例的网站来说十分有利，它保证了图片快速、无缝地发布，也可帮助用户在浏览网站内容时获得更好的用户体验。示例代码：
function
loadImage(url,
callback)
{
var
img
=
new
Image()
//创建一个Image对象，实现图片的预下载
img.src
=
url
if
(img.complete)
{
//
如果图片已经存在于浏览器缓存，直接调用回调函数
callback.call(img)
return
//
直接返回，不用再处理onload事件
}
img.onload
=
function
()
{
//图片下载完毕时异步调用callback函数。
callback.call(img)//将回调函数的this替换为Image对象
}
}
