图片异步加载的一种处理方法

在做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);" />