JS实现图片预加载是什么意思?是要实现怎么样的效果?

JavaScript013

JS实现图片预加载是什么意思?是要实现怎么样的效果?,第1张

预加载图片是提高用户体验的一个很好方法。图片预先加载到浏览器中,这对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速、无缝地发布,也可帮助用户在浏览网站内容时获得更好的用户体验。

示例代码:

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等属性来设置...