使用JavaScript判断图片是否加载完成的三种实现方式
有时需要获取图片的尺寸，这需要在图片加载完成以后才可以。有三种方式实现，下面一一介绍。
一、load事件
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>img - load event</title>
</head>
<body>
<img id="img1" src="http://pic1.win4000.com/wallpaper/f/51c3bb99a21ea.jpg">
<p id="p1">loading...</p>
<script type="text/javascript">
img1.onload = function() {
p1.innerHTML = 'loaded';
}
</script>
</body>
</html>
测试，所有浏览器都显示出了“loaded”，说明所有浏览器都支持img的load事件。
二、readystatechange事件
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>img - readystatechange event</title>
</head>
<body>
<img id="img1" src="http://pic1.win4000.com/wallpaper/f/51c3bb99a21ea.jpg">
<p id="p1">loading...</p>
<script type="text/javascript">
img1.onreadystatechange = function() {
if(img1.readyState=="complete"||img1.readyState=="loaded"){
p1.innerHTML = 'readystatechange:loaded'
}
}
</script>
</body>
</html>
readyState为complete和loaded则表明图片已经加载完毕。测试IE6-IE10支持该事件，其它浏览器不支持。
三、img的complete属性
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>img - complete attribute</title>
</head>
<body>
<img id="img1" src="http://pic1.win4000.com/wallpaper/f/51c3bb99a21ea.jpg">
<p id="p1">loading...</p>
<script type="text/javascript">
function imgLoad(img, callback) {
var timer = setInterval(function() {
if (img.complete) {
callback(img)
clearInterval(timer)
}
}, 50)
}
imgLoad(img1, function() {
p1.innerHTML('加载完毕')
})
</script>
</body>
</html>
使用JavaScript判断图片是否加载完成的三种实现方式的更多相关文章
- JavaScript判断图片是否加载完成的三种方式
JavaScript判断图片是否加载完成的三种方式 有时需要获取图片的尺寸,这需要在图片加载完成以后才可以.有三种方式实现,下面一一介绍. 一.load事件 1 2 3 4 5 6 7 8 9 10 ...
- JavaScript判断图片是否加载完成的三种方式 (转)
一.load事件 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 <!DOCTYPE HTML> <html> <head> ...
- JavaScript实现判断图片是否加载完成的3种方法整理
JavaScript实现判断图片是否加载完成的3种方法整理 有时候我们在前端开发工作中为了获取图片的信息,需要在图片加载完成后才可以正确的获取到图片的大小尺寸,并且执行相应的回调函数使图片产生某种显示 ...
- JavaScript判断图片是否加载完成
一.load事件 <!DOCTYPE HTML><html> <head> <meta charset="utf-8"> ...
- javascript判断图片是否加载完成方法整理
有时候我们在前端开发工作中为了获取图片的信息,需要在图片加载完成后才可以正确的获取到图片的大小尺寸,并且执行相应的回调函数使图片产生某种显示效果.本文主要整理了几种常见的javascipt判断图片加载 ...
- 基于javascript实现图片懒加载（亲测有效）
这篇文章主要介绍了javascript实现图片懒加载的方法及思路,有时我们需要用懒加载,也就是延迟加载图片的方式,来提高网站的亲和力,需要的朋友可以参考下! 一.定义 图片延迟加载也称为懒加载,延迟加 ...
- JS判断图片是否加载完成三种方式
1.img的complete属性 轮询不断监测img的complete属性,如果为true则表明图片已经加载完毕,停止轮询.该属性所有浏览器都支持. <p id="p1"&g ...
- Javascript兑现图片预加载【回调函数，多张图片】 (转载)
Javascript实现图片预加载[回调函数,多张图片] 使用JS实现一组图片动画效果或者使用HTML5 Canvas渲染一系列图片等案例中,需要图片全部加载完成方可运行动画效果.此时程序中就会涉及多 ...
- js 判断图片是否加载完成(使用 onload 事件)
我们在写 jquery 的时候一般都会写 $(document).ready,加载完成事件还有一个就是 onload onload 与 ready 的区别是: 1.ready 是 DOM 加载完成的事 ...
随机推荐
- 三个重要的游标sp_cursoropen
請問這三個存諸過程的作用是什么﹖ sp_cursoropen, sp_cursorfetch, sp_cursorclose API 服务器游标实现 SQL Server OLE DB 提供程序. ...
- javaweb分页思想
web上的分页分析 在web编写中的经常会遇到,数据需要分页的情况.当数据量不是很大的时候. 可以直接使用js来分页.可以很好的提高性能.简化代码.数据量大的时候.还是需要使用java的分页类 ...
- ZOJ 3818 Pretty Poem
暴力模拟 细节处理很重要... #include <iostream> #include <cstring> #include <cstdio> using nam ...
- LoadRunner参数化功能详解
更新方式: . Each Occurrence 每次遇到参数就进行更新. 多次使用同一参数,而且没有什么关联,例如随机数. Each Iteration 每次迭代时发生更新. 如果参数出现几 ...
- excel筛选两列值是否相同，如果相同返回第三列值
见图:
- block（四）揭开神秘面纱（下）
看此篇时,请大家同时打开两个网址(或者下载它们到本地然后打开): http://llvm.org/svn/llvm-project/compiler-rt/trunk/lib/BlocksRuntim ...
- Win8 X64下JDK版本切换问题
1:现在笔记本上安装的是,执行java -version: 2:现在又安装了,想通过修改环境变量,使JDK切换到1.6版本上 JDK的安装目录:D:\Java\ 修改环境变量: (1)JAVA_HOM ...
- Qt修改文件内容
在用Qt进行嵌入式开发的时候,有时需要通过界面永久的改变ip地址等网卡信息.此时只能修改系统中包含网卡信息的文件,下图红框中所示就是文件中的网卡信息. 那么如何修改这四行呢,我的做法是先打开该文本文件 ...
- 2013第49周一jsp标签
2013第49周一jsp标签 今天在调试一些前台页面上的问题,在处理structs标签.jstl标签时遇到了些麻烦,为了调用后台数据字典中的类方法,开始在<c:forEach>中尝试怎么样 ...
- deflate与gzip
gzip是一种数据格式,默认且目前仅使用deflate算法压缩data部分: deflate是一种压缩算法,是huffman编码的一种加强. deflate与gzip解压的代码几乎相同,可以合成一块代 ...