html中的图像动态加载问题
首先要说明下文档加载完成是什么概念
一个页面http请求访问时,浏览器会将它的html文件内容请求到本地解析,从窗口打开时开始解析这个document,页面初始的html结构和里面的文字等内容加载完成 + 图片标签及样式文件中的引用的图片加载完成(多媒体内容类似)大致为document加载完成的时间,我们在引入的js文件中动态改变(如增加)图片的操作不计为document的加载时间。
如下图:

红线右边的图片资源是在页面初始时请求服务器动态加载进来的,它不在document完成时红线标志的范围以内。
动态请求图片加载有哪些影响?
浏览器加载图片资源是一个等待事件,同ajax访问,document加载一样。
我们知道javascript是非阻塞式的执行代码,它会跳过等待事件执行后面的代码,这就意味着在图片资源加载的等待事件中你捕捉不到相应的图片dom元素,因为执行时图片还未加载进来。
我们怎么处理这种情况?
浏览器为了解决等待事件的弊端,为每种等待事件都会设置一个事件完成时的回调函数,以便于开发者能对等待加载进来的内容加以操作。以动态加载图片为例,浏览器中有一个类为Image,我们可以通过该类new出一个 dom元素,代码如下:
var img = new Image();
img.src = './img/demo.png';
img.onload = function () {
console.log(this);
}
这样一个图片资源就被加载进来了,并且可以对其进行操作。
html中的图像动态加载问题的更多相关文章
- 非常郁闷的 .NET中程序集的动态加载
记载这篇文章的原因是我自己遇到了动态加载程序集的问题,而困扰了一天之久. 最终看到了这篇博客:http://www.cnblogs.com/brucebi/archive/2013/05/22/Ass ...
- 在Unity3D的网络游戏中实现资源动态加载
用Unity3D制作基于web的网络游戏,不可避免的会用到一个技术-资源动态加载.比如想加载一个大场景的资源,不应该在游戏的开始让用户长时间等待全部资源的加载完毕.应该优先加载用户附近的场景资源,在游 ...
- Java之——Web项目中DLL文件动态加载方法
本文转自:https://blog.csdn.net/l1028386804/article/details/53903557 在Java Web项目中,我们经常会用到通过JNI调用dll动态库文件来 ...
- (转)在Unity3D的网络游戏中实现资源动态加载
原文:http://zijan.iteye.com/blog/911102 用Unity3D制作基于web的网络游戏,不可避免的会用到一个技术-资源动态加载.比如想加载一个大场景的资源,不应该在游戏的 ...
- angularJS ng-repeat中的directive 动态加载template
有个需求,想实现一个html组件,传入不同的typeId,渲染出不同的表单元素. <div ng-repeat="field in vm.data"> <magi ...
- java 中能否使用 动态加载的类(Class.forName) 来做类型转换?
今天同事提出了一个问题: 将对象a 转化为类型b,b 的classpath 是在配置文件中配置的,需要在运行中使用Class.forName 动态load进来,因为之前从来没有想过类似的问题,所以懵掉 ...
- layui中radio的动态加载(进入修改页面时,设置radio)
动态设置 radio 的值让它处于选中状态 效果图 : 前端代码: <div class="layui-form-item"> <label class=& ...
- Android 图片从网页中获取并动态加载到listview中
实现功能: 效果图: 代码:这里
- 在MVC应用程序中动态加载PartialView
原文:在MVC应用程序中动态加载PartialView 有时候,我们不太想把PartialView直接Render在Html上,而是使用jQuery来动态加载,或是某一个事件来加载.为了演示与做好这个 ...
随机推荐
- ABAP 特性值取数 非BAPI方式
特性值在ausp,objnr 一般是客户号或是客户号拼接的,客户号加特征字段特征类别就可以取了
- Json数组追加数据
背景:在做一个购物车的时候,点击第一个商品,然后存入一个json数组中,点击第二个商品的时候,又继续在json数组中追加,代码如下: <script type="text/javasc ...
- 总结移动安全的测试点及详解allowbackup漏洞
一.移动应用APP可能面临以下威胁: 木马--二次打包, 病毒--账号窃取, 篡改--资源篡改, 破解--广告植入, 钓鱼--信息劫持 二.移动终端APP安全评估的7个方向: 通信安全,敏感信息安全 ...
- Linux下的DOS攻击
Linux下的DOS攻击 DOS是Denial of service的简称,即拒绝服务,造成Dos攻击行为被称为Dos攻击,其目的是使计算机或网络无法提供正常的服务.最常见的Dos攻击有计算机带宽攻击 ...
- Js中 md5 sha1 base64 加密
js的3中加密方式: .sha1加密,加密性高 调用: var sha = hex_sha1(str); .base64加密 调用: var b = new Base64(); var str = b ...
- wkhtmltopdf 将网页转换为PDF和图片
wkhtmltopdf 是一个shell工具,它使用了WebKit渲染引擎和Qt,将网页html转换为pdf的强大工具,转换后的pdf也可以通过pdf工具进行复制.备注.修改 官网下载地址:http: ...
- Yii2 事务操作
官网关于Yii2 事务的说明文档 http://www.yiiframework.com/doc-2.0/guide-db-active-record.html Working with Transa ...
- Jenkins+Maven+SVN快速搭建持续集成环境
http://www.cnblogs.com/sunzhenchao/archive/2013/01/30/2883289.htmlhttp://blog.csdn.net/pein_zero/art ...
- UWP学习记录1-开端
UWP学习记录1-开端 1.背景 针对不同基础的人,学习的路线自然是不同的.这篇文章记录的是我个人的学习路线,或者说笔记.我对自己的技术状态的定义是: A.有很好的windows平台编程基础: B.有 ...
- 安装Kafka
1.默认安装好zookeeper和scala2.下载安装包,解压 tar -zxvf kafka_2.11-0.9.0.1.tgz kafka_2.11-0.9.0.13.配置环境变量 vim /et ...