创建一个Image对象,实现图片的预下载,如果图片已经存在于浏览器缓存,直接调用回调函数,使用onload事件可以判断图片是否加载完成
view sourceprint?
01 function loadImage(url, callback) {
02 var img = new Image(); //创建一个Image对象,实现图片的预下载
03 img.src = url;
04
05 if(img.complete) { // 如果图片已经存在于浏览器缓存,直接调用回调函数
06 callback.call(img);
07 return; // 直接返回,不用再处理onload事件
08 }
09 img.onload = function () { //图片下载完毕时异步调用callback函数。
10 callback.call(img);//将回调函数的this替换为Image对象
11 };
12 };
view sourceprint?01
02
03
04
05
判断图片是否加载完成 06
07
08
09
10
11
12
13 document.getElementById("img2").onload = function () {
14 alert("图片加载已完成");
15 }
16
更多信息请查看IT技术专栏