示例代码:
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对象
}
}
慕课网 -- 有序加载
有序加载与无序加载的区别在无序加载 通过 $.each()方法对图片进行了同时加载 ,也就是所有图片的加载是同时进行的,当然其完成顺序是随机的,看网络因素和图片本身的大小,而有序加载是从imgs数组的第一张开始往后加载,即当前只加载一张图片,所以没有使用$.each()方法进行遍历。
实例化对象、监听事件、赋值。
懒加载就是把图片的url放置元素标签的自定义属性里,由滚动来判断当前图片是否在视窗里,然后setattribute,getattribute等属性来设置...