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. 使用HTML5的JavaScript选择器操作页面中的元素

    <!doctype html><html lang="en"> <head>     <meta charset="UTF-8& ...

  2. javaScript获取文档中所有元素节点的个数

    HTML+JS 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...

  3. 如何在latex 中插入EPS格式图片

    如何在latex 中插入EPS格式图片 第一步:生成.eps格式的图片 1.利用visio画图,另存为pdf格式的图片 利用Adobe Acrobat裁边,使图片大小合适 另存为.eps格式,如下图所 ...

  4. 如何在mysql中存储音乐和图片文件

    如何在mysql中存储音乐和图片文件? 果你想把二进制的数据,比如说图片文件和HTML文件,直接保存在你的MySQL数据库,那么这篇文章就是为你而写的! 我将告诉你怎样通过HTML表单来储存这些文件, ...

  5. angular 图片加载失败 情况处理? 如何在ionic中加载本地图片 ?

    1.angular 图片加载失败 情况处理 在directive中定义组件,在ng-src错误时,调用err-src app.directive('errSrc',function(){ return ...

  6. jQuery基础学习5——JavaScript方法获取页面中的元素

    给网页中的所有<p>元素添加onclick事件 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN& ...

  7. Python中替换元素

    假设现在班里仍然是3名同学: >>> L = ['Adam', 'Lisa', 'Bart'] 现在,Bart同学要转学走了,碰巧来了一个Paul同学,要更新班级成员名单,我们可以先 ...

  8. [TimLinux] JavaScript 如何在html标签的data-*属性使用JSON数据

    1. HTML data-*属性 H5引入的data-*属性,可以在JavaScript通过.dataset.*的方式来获取属性的值,例如: /* HTML标签: * <input id=&qu ...

  9. 如何在webpack中成功引用到图片?

    打包图片时,你可曾遇到在产出目录文件夹找不到图片,即便找到了,但是页面说引用不到资源?页面上或者文件中引用的图片地址不对? 一.在webpack中引入图片需要url-loader //webpack配 ...

随机推荐

  1. mariadb 10.2.3支持延时复制

    在mysql 5.6开始就支持延时复制,这在一些需要维护大量非标准化系统或者运维技术水平较低的公司和开发人员众多的项目组这是一个非常有价值的特性,可以说误操作的概率跟一个城市车祸概率的水平差不多了,我 ...

  2. cppcheck 下载与安装(Liunx)

    下载网址:https://sourceforge.net/projects/cppcheck/files/cppcheck/ 选择安装包:cppcheck-1.75.tar.gz 解压安装包:tar ...

  3. iOS——关于打印控件

    20.UIPrintFormatterUIPrintFormatter时打印格式化的抽象基类:展示了传统的可打印的内容对象可以跨页边界.由于打印格式化,打印系统,可以自动打印与打印格式化的内容相关联的 ...

  4. 常用后台frame框架

    一般后台框架结构: top:左边显示logo,右边显示模块信息. left:对应模块的菜单信息. content:具体的内容. bottom:版权.时间等一些碎屑信息. Html代码: <htm ...

  5. jQuery 实现上下,左右滑动

    前几天的任务:http://t.sina.com.cn/  的下滑效果. 渐变移动出足够的空白 -> 淡出最后一个 ->渐变移动出足够的空白 我们要做的是向左移动效果.这个效果用时需添加一 ...

  6. 转:CSS选择器笔记

    作者: 阮一峰 日期: 2009年3月12日 去年我学jQuery的时候,曾经做过一点选择器(selector)的笔记. 这几天拿出来看了一下,发现很多都忘记了.所以,我决定把它们贴在这里,方便以后查 ...

  7. js多个物体运动的问题1

    问题2 http://www.cnblogs.com/huaci/p/3854304.html 用js写一个物体的运动很简单.如果一个页面有多个物体在运动,它会不会出问题呢? ok,我们来看一个示例 ...

  8. Bootstrap入门(十六)组件10:well和具有响应式特性的嵌入内容

    Bootstrap入门(十六)组件10:well和具有响应式特性的嵌入内容 well组件可以为内容增添一种切入效果. 具有响应式特性的嵌入内容可以根据被嵌入内容的外部容器的宽度,自动创建一个固定的比例 ...

  9. 关于Java面试

    Java基础知识复习 1. 简单讲一下Java跨平台的原理 由于操作系统(Windows.Linux)支持的指令集,不是完全一致的.就会让我们程序在不同的操作系统上执行不同的代码.Java开发了不同操 ...

  10. python全栈开发 随笔 &#39;is&#39; 和 == 的比较知识与区别 编码和解码的内容及转换

    python 一. is 和 == 的区别; == 比较的是两边的值. a = 'alex' b = 'alex' print(a = b) #True a = 10 b = 10 print(a = ...