- 浏览: 1073026 次
- 性别:
- 来自: 北京
文章分类
- 全部博客 (453)
- Struts2 (30)
- Spring (14)
- iBATIS (6)
- Hibernate (13)
- JVM (5)
- JSON (10)
- Ajax (5)
- Flex (1)
- JavaScript (25)
- PowerDesigner (4)
- 项目管理 (7)
- 数据库 (29)
- 生活 (18)
- 软件应用 (21)
- 无线技术 (2)
- Linux (39)
- TOP开发学习 (2)
- JAVA工具小TIPS (2)
- Java通用 (52)
- XML (3)
- 软件测试 (29)
- Maven (10)
- Jquery (1)
- 正则表达式 (3)
- 应用服务器 (15)
- Android (5)
- linux 和windowx 下 tomcat 设置JVM (8)
- 应用服务器 连接池 (4)
- Linux 后台输出中文乱码 (1)
- Hadoop (28)
- python (2)
- Kafka (7)
- Storm (5)
- Elasticsearch (7)
- fddd (1)
最新评论
-
kafodaote:
Kafka分布式消息系统实战(与JavaScalaHadoop ...
分布式消息系统Kafka初步 -
小灯笼:
LoadRunner性能测试实战课程网盘地址:http://p ...
LoadRunner性能测试应用(八) -
成大大的:
Kafka分布式消息系统实 ...
分布式消息系统Kafka初步 -
hulalayaha2:
Loadrunner性能测试视频教程下载学习:http://p ...
LoadRunner性能测试应用(八) -
993042835:
搞好 谢谢
org.hibernate.exception.ConstraintViolationException: could not delete:
通过js操纵DOM很多情况下都是为了实现和当前页html元素的异步载入,我谈谈对Image对象的一些认识。 看个例子: <input type="button" name="" value="载入图片" onclick="addImg('tt.jpg')" /> <script type="text/javascript"> <!-- function addImg(isrc) { var Img = new Image(); Img.src = isrc; Img.onload = function () { document.body.appendChild(Img); } } //--> </script> 当包含上述代码的页面打开时并不载入 “tt.jpg” ,当点击按钮时候才载入。当载入完成后触发onload事件显示到页面上。如果你是第一次加载 “tt.jpg" 这张图片的话,运行正常。点击按钮加载并显示一张图片,如果重复点击会怎么样呢? IE、Opera中,除了第一次加载 图片时候显示正常,之后再点击就没有反应了,刷新也一样。难道它们只触发一次 ”onload“ 事件?是缓存机制? FF、Chrom中,每点击一次加载一张该图片。 稍微修改下: <input type="button" name="" value="载入图片" onclick="addImg('tt.jpg')" /> <script type="text/javascript"> <!-- function addImg(isrc) { var Img = new Image(); Img.onload = function () { document.body.appendChild(Img); } Img.src = isrc; } //--> </script> 运行后发现,奇怪的事情发生了。所有的浏览器都一致了,都是每点击一次加载一张图片。这又是什么原因?由此可以见 IE、Opera 执行过程中并不是只触发一次 onload 事件! 联想一下 Image 对象的一些属性看看,complete、readyState(IE专属值[uninitialized,complete]) (为防止缓存影响效果请更换图片名称!) <input type="button" name="" value="complete" onclick='alert("complete : "+Img.complete +"\nreadyState : "+Img.readyState)' /> <input type="button" name="" value="载入图片" onclick="addImg('mtm.jpg')" /> <script type="text/javascript"> <!-- var Img; function addImg(isrc) { Img = new Image(); //Img.src = isrc; Img.onload = function () { alert("complete : "+Img.complete +"\nreadyState : "+Img.readyState) document.body.appendChild(Img); } Img.src = isrc; } //--> </script> 经过以上测试,可以看出一些不同点,对于 complete 属性来讲,IE是根据图片是否显示过来判断,就是说当加载的图片显示出来后,complete 属性的值才为 true ,否则一直是 false ,和以前是否加载过该张图片没有关系,即和缓存没有关系!但是其它浏览器表现出来的确不一样,只要以前加载过该图,浏览器有缓存,complete 就为 true ,这和IE的 readyState 属性的表现一致! 至此,可以肯定的是所有的浏览器都会缓存图片!可是上面的问题到底是什么原因导致的呢? 众所周知,从缓存里加载东西的速度是很快的,那么在 ... Img.src = isrc; Img.onload = ... ... 的过程中,难道 IE、Opera 加载的速度快到,来不及追加事件? 这回加载一张根本不存在的图片看看效果: <input type="button" name="" value="complete" onclick='alert("complete : "+Imgttmt.complete +"\nreadyState : "+Imgttmt.readyState)' /> <input type="button" name="" value="载入图片" onclick="addImg('mtmttyt.jpg')" /> <script type="text/javascript"> <!-- var Imgttmt; function addImg(isrc) { Imgttmt = new Image(); Imgttmt.src = isrc; alert("complete : "+Imgttmt.complete +"\nreadyState : "+Imgttmt.readyState) Imgttmt.onload = function () { alert("impossible") } } //--> </script> 可以肯定的是所有浏览器都不触发 onload 事件。从是否缓存或已经加载过图片的角度讲,IE、Opera表现正常,complete 始终为 false ;IE的 readyState 始终为uninitialized 。令人疑惑的是FF,其中 Imgttmt.complete 的值一直是 true ;更令人困惑的是 Chrom,它是在最初 new Imgttmt() 的时候 Imgttmt.complete 值为 false。而之后 Imgttmt.complete 值就一直为 true 了!如果换一张从来没有加载过的图片,FF和Chrom 的行为就一致了,都是一开始加载时, Imgttmt.complete 值为false, 之后为 true! 测试的过程中还发现,脚本的执行顺序的确会影响到类似于 onload 等事件的追加,如果在其显示后在追加事件就没有什么实际意义了!基于 javascript 这种解释性语言的特性,在追加事件的时候一定要注意把事件追加在触发该事件的句柄之前。
发表评论
-
使用casperis模拟登陆淘宝的思路及源码
2014-09-17 10:31 4038http://www.xinzimi.com/629.htm ... -
Html中的textarea 的内容不居左显示问题
2011-07-04 10:54 3477我发现jsp页面的中textarea有时候不居左显示,而是在中 ... -
用JS确认删除的两种函数
2011-06-13 11:54 1518<script language="javas ... -
Js 获取当前日期时间及其它操作实现代码
2011-03-25 09:46 970myDate.getYear(); //获取当前年份(2位) ... -
js获得当前日期和时间的代码
2011-03-25 09:45 2043<html> <head> < ... -
使用flot绘图出现window.G_vmlCanvasManager is null or not an Object
2011-03-01 16:24 1672使用flot绘图出现window.G_vmlCanvasMan ... -
网站加密,防止截屏,打印,另存为
2011-01-17 11:05 37891、禁止另存网页,把如 ... -
DIV 随着滚动条 移动
2010-12-10 13:22 1741<!DOCTYPE html PUBLIC " ... -
一个小巧的图片预加载类...
2010-10-26 13:58 886<!DOCTYPE html PUBLIC " ... -
IE报缺少 冒号, firefox 正常。
2010-10-20 12:04 2795function onDataReceived(series ... -
JavaScript 在 Firefox下正常IE下报错的几个例子
2010-10-20 11:36 14921. json 数据中多余的逗号 : 代码 var m ... -
js function 返回值问题
2010-10-18 22:07 1267<script> function datach ... -
js 判断checkbox是否选中
2010-10-18 22:06 2274Java代码 //第几个没有选 <in ... -
input text 的一些事件
2010-10-10 10:13 4867<html> <head> < ... -
js正则表达式限制文本框只能输入数字,小数点,英文字母,汉字等各类代码
2010-09-07 11:09 2617JS-只能输入中文和英文2008-11-08 10:17在js ... -
textarea文字怪异的居中解决办法
2010-09-02 11:16 1686textarea文字怪异的居中解决办法 每次文字从数据库 ... -
禁止另存,复制,右键,选取
2010-08-31 21:08 1183禁止另存代码: <noscript> ... -
一些很实用且必用的小脚本代码
2010-08-25 11:32 918脚本1:进入主页以后自动播放声音 <embed src ... -
动态监听文本框获取焦点与失去焦点事件
2010-08-25 11:27 3578<!DOCTYPE HTML PUBLIC " ... -
计算网页停留时间
2010-08-16 10:43 2500<html xmlns="http://www ...
相关推荐
input type=”button” name=”” value=”载入图片” onclick=”addImg(‘tt.jpg’)” /> [removed] <!– function addImg(isrc) { var Img = new Image(); Img.src = isrc; Img.onload = function () { ...
我们知道在 Web 页面中实现图片的预加载其实很简单,通常的做法是在 JS 中使用 Image 对象即可,代码大致如下 var image = new Image() image.onload = function() { console.log('图片加载完成') } image.src = '...
查看插件的源码,发现它也依赖图片对象的complete属性和onload事件,并且特别把IE6区分对待,到底IE6在图片加载对象上,与其它浏览器有什么不同呢? 看下文: 通过js操纵DOM很多情况下都是为了实现和当前页html元素...
关于 Image 对象 onload 事件。 想获取的是 image 的 宽高值。所以用 onload 方法。另外是获取的远程图片。 但IE在第二次显示图片的时候,总是不走 onload 方法。代码: var img = new Image(); img.src = ...
脱离document.onload和window.onload的onload事件,可多次添加加载事件!
创建一个Image对象,实现图片的预下载,如果图片已经存在于浏览器缓存,直接调用回调函数,使用onload事件可以判断图片是否加载完成 function loadImage(url, callback) { var img = new Image(); //创建一个Image...
基于jquery开发的一个小插件,主要作用是绑定图片(img标签)的onload事件,如果是纯JavaScript开发,可借鉴下面的代码: var imgLoad = function (url, callback) { var img = new Image(); img.src = url; if ...
而本文所提到的预加载技术主要是让javascript快速获取图片头部数据的尺寸。一段典型的使用预加载获取图片大小的例子: 代码如下: var imgLoad = function (url, callback) { var img = new Image(); img.src = url; ...
javascript图片预加载,监测图片加载完成,获取图片真实尺寸的组件(图片延迟加载) 如何使用 // 首先在页面中引入imageReady.js /** * @param img string|Image 图片url或者Image对象 * @param onready Function ...
我们来学习一种名为图像预装载(image preloading)的小技巧来提高图像访问速度,一些浏览器试图通过在本地缓存中保存这些图片来解决此问题,感兴趣的朋友可以了解下
下面小编给大家整理了几种关于JS判断图片是否加载完成方法汇总,一起看看吧。 一、load事件 [removed] $('img').onload = function() { //code } [removed] 优点:简单易用,不影响HTML代码。 缺点:只能指定一...
JS实现图片瀑布流效果 本文实例为大家分享了JS实现图片瀑布流的具体代码,供大家参考,具体内容如下 过程: 1、创建一个放所有图片的模块bigblock。...5、使用 window.onload事件,加载图片更方便。 6、给浏
react 实现图片正在加载中 加载完成 加载... 图片是有许多的事件的,例如,onload, onerror等,图片只要一加载就会调用onload的事件,不管是加载成功还是加载失败都会调用这个方法。而onerror方法是图片在没有显示出来
jQuery实现图片预加载 JS代码 $(function(){ loadImg("http://huoche.7234.cn/images/jb51/2ger14hwewt.gif",addImg); function loadImg(url,callback){ var img = new Image(); img.onload = function(){ img...
自制网页页面加载动画:效果一与效果二(含有HTML字符实体+CSS动画animation+js事件onbeforeunload、onload实现)
//创建一个Image对象,实现图片的预下载 img.src = url; if (img.complete) { // 如果图片已经存在于浏览器缓存,直接调用回调函数 callback(img); return; // 直接返回,不用再处理onload事件 } img.onload = ...
下拉框读取数据库数据.有时候数据多.会拉的很长.客户搜索起来很不方便.现在可以编辑下拉框,可根据输入的... 调用onload事件. <body onload="quickSelectInit();"> 测试方法:点击下拉框.随便输入一个字母.即可看到效果.