在做web开发时,网页的展示过程中总是少不了图片的展示,由于受到网速的影响图片的加载总是缓慢的。
以下是一种图片的异步加载的方法,原理实际上还是很简单的,
首先展示一张默认图片,一般都是比较小的图片,最好是像素点,新建一个img对象,当这个新的img对象加载完成后替换掉原来的img元素。
以下是具体实现:
function showLoadedImage(sUrl, obj){ //sUrl图片真实地址,obj预加载的图片对象
var img = new Image();
img.src = sUrl;
img.className = obj.className;
if ($.browser.msie) //判断浏览器类型
{
img.src = sUrl + '?t=' + Math.random();
img.onreadystatechange = function()
{
if (this.readyState=="loaded" || this.readyState=="complete")
{
obj.parentNode.replaceChild(img, obj);
}
};
}else if ($.browser.opera || $.browser.mozilla || $.browser.safari)
{
img.onload = function() //加载完毕后替换img对象
{
obj.parentNode.replaceChild(img, obj);
};
}
else
{
obj.parentNode.replaceChild(img, obj);
}
}
调用:
<img class="imageclassname" src="default.png" οnlοad="javascript:showLoadedImage('sourceimage.jpg', this);" />