[TimLinux] JavaScript 如何在AJAX中替换元素的图片
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中替换元素的图片的更多相关文章
- 使用HTML5的JavaScript选择器操作页面中的元素
<!doctype html><html lang="en"> <head> <meta charset="UTF-8& ...
- javaScript获取文档中所有元素节点的个数
HTML+JS 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...
- 如何在latex 中插入EPS格式图片
如何在latex 中插入EPS格式图片 第一步:生成.eps格式的图片 1.利用visio画图,另存为pdf格式的图片 利用Adobe Acrobat裁边,使图片大小合适 另存为.eps格式,如下图所 ...
- 如何在mysql中存储音乐和图片文件
如何在mysql中存储音乐和图片文件? 果你想把二进制的数据,比如说图片文件和HTML文件,直接保存在你的MySQL数据库,那么这篇文章就是为你而写的! 我将告诉你怎样通过HTML表单来储存这些文件, ...
- angular 图片加载失败 情况处理? 如何在ionic中加载本地图片 ?
1.angular 图片加载失败 情况处理 在directive中定义组件,在ng-src错误时,调用err-src app.directive('errSrc',function(){ return ...
- jQuery基础学习5——JavaScript方法获取页面中的元素
给网页中的所有<p>元素添加onclick事件 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN& ...
- Python中替换元素
假设现在班里仍然是3名同学: >>> L = ['Adam', 'Lisa', 'Bart'] 现在,Bart同学要转学走了,碰巧来了一个Paul同学,要更新班级成员名单,我们可以先 ...
- [TimLinux] JavaScript 如何在html标签的data-*属性使用JSON数据
1. HTML data-*属性 H5引入的data-*属性,可以在JavaScript通过.dataset.*的方式来获取属性的值,例如: /* HTML标签: * <input id=&qu ...
- 如何在webpack中成功引用到图片?
打包图片时,你可曾遇到在产出目录文件夹找不到图片,即便找到了,但是页面说引用不到资源?页面上或者文件中引用的图片地址不对? 一.在webpack中引入图片需要url-loader //webpack配 ...
随机推荐
- 服务器spring boot版本,平滑升级
1.在pom文件中加入: <!--平滑升级包 开始 --> <dependency> <groupId>org.springframework.boot</g ...
- windows系统cmd命令行窗口查看端口占用情况
# 查看所有在用端口 netstat -ano # 查看指定端口 netstat -ano | findstr 8899 # 结束该进程:taskkill /f /t /im javaw.exe:或者 ...
- 搭建Nginx正向代理服务
需求背景: 前段时间公司因为业务需求需要部署一个正向代理,需要内网服务通过正向代理访问到外网移动端厂商域名通道等效果,之前一直用nginx做四层或者七层的反向代理,正向代理还是第一次配置,配置的过程也 ...
- BootStrap中的collapse插件堆叠效果
通过网络上的一系列查找,总结出的collapse插件堆叠效果(网上没有找到,只能自己弄了,帮助那些和我遇到一样状况的同学) 首先感谢一位网友的知识总结给了我灵感,在这里先帮他推荐一波(https:// ...
- pod删除主要流程源码解析
本文以v1.12版本进行分析 当一个pod删除时,client端向apiserver发送请求,apiserver将pod的deletionTimestamp打上时间.kubelet watch到该事件 ...
- MyEclipse使用总结
0.快捷键 ================================================================================ 编辑: Ctrl+Shif ...
- 使用TensorRT对caffe和pytorch onnx版本的mnist模型进行fp32和fp16 推理 | tensorrt fp32 fp16 tutorial with caffe pytorch minist model
本文首发于个人博客https://kezunlin.me/post/bcdfb73c/,欢迎阅读最新内容! tensorrt fp32 fp16 tutorial with caffe pytorch ...
- 关于HashMap容量的初始化,还有这么多学问。
在<HashMap中傻傻分不清楚的那些概念>文章中,我们介绍了HashMap中和容量相关的几个概念,简单介绍了一下HashMap的扩容机制. 文中我们提到,默认情况下HashMap的容量是 ...
- ASP.NET Core 中的 ObjectPool 对象重用(二)
前言 上一篇文章主要介绍了ObjectPool的理论知识,再来介绍一下Microsoft.Extensions.ObjectPool是如何实现的. 核心组件 ObjectPool ObjectPool ...
- 简单入门Kubernetes
什么是Kubernetes 官网 https://kubernetes.io/ 中文版:https://kubernetes.io/zh/ 个人理解 基于容器技术 分布式架构 弹性伸缩 隔离物理机 和 ...