1. 示例代码

/*

 *  <img id="idTestImg" src="/static/test.png" />

 */

var idTestImg = document.getElementById('idTestImg');

var tmpImgObj = new Image(); // 也可以使用document.creatElement('img'); 创建效果是一样的。

tmpImgObj.src = '/static/new.png';  // 这个操作会触发从服务器请求图片的行为

if (tmpImgObj.complete) {

    // 判断图片是否存在缓存中，缓存中的图片不需要onload操作

    idTestImg.src = tmpImgObj.src;

} else {

    // 不在缓存中的图片，下载完成之后，会触发load事件，在onload事件处理程序中，完成替换图片功能。

    tmpImgObj.onload = function () {

        idTestImg.src = tmpImgObj.src;

    };

}

2. 说明

图像对象的创建方式有两种：new Image(); document.createElement('img');
给图像对象的src属性赋值，会触发浏览器向服务器请求图片资源的过程；
图片可能在缓存中，也可能来自服务器请求过来的资源，complete属性可以判断；
load事件除了可以使用在body对象，也可以使用在img对象上。
可以不创建一个临时对象：直接将idTestImg.src赋值给一个url值，同样能够达到以上的效果。

巴特西

[TimLinux] JavaScript 如何在AJAX中替换元素的图片

1. 示例代码

2. 说明

最新文章

热门文章