使用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 加载完成的事 ...
随机推荐
- line-height下的dispay:inline-block垂直居中
html: <div class="search fl"> <span class="search-box"> <input ty ...
- freemarker中遍历list<map<String,String>>
<#list var as map><tr> <#list map?keys as itemKey> //关键点 <#if itemKey=" ...
- Destoon标签使用技巧十则
Destoon标签 1.全局标签 网站名称:{$DT[sitename]}网站地址:{DT_PATH}网站LOGO: {if $MODULE[$moduleid][logo]}{DT_SKIN}ima ...
- 黑马程序员——读取Plist文件
-iOS培训,iOS学习-------型技术博客.期待与您交流!------------ 读取Plist文件 一:新建一个plist文件,并将plist文件数据填入plist文件中,这里pli ...
- php 和 apache的关系
例如在客户端游览器输入他也回把这个地址传送到192.168.1.100里的apache里的,apache一看你传过来的是Php文件,如果在服务器没装php的情况下,他也会把这个文件打开,把里面的代码全 ...
- javascript if 和else 语句练习
1.标准体重://男士体重=身高-100±3<br />//女士体重=身高-110±3<br />//输入性别.身高.体重,查看体重是否标准. <script type= ...
- ReactiveCocoa v2.5 源码解析 之 架构总览
ReactiveCocoa 是一个 iOS 中的函数式响应式编程框架,它受 Functional Reactive Programming 的启发,是 Justin Spahr-Summers 和 J ...
- 【转】ios开发之生成所缩略图方式
亲测:两种方式都有效 第一种方式:缩略成固定的尺寸大小 - (UIImage *)thumbnailWithImageWithoutScale:(UIImage *)image size:(CGSiz ...
- ng-repeat 与ng-switch的简单应用
效果如下图所示: 使用表格显示用户信息,当点击某条用户信息时,在其下方展开一行进行展示. index.html <!DOCTYPE html> <html ng-app=" ...
- ASP.NET MVC3快速入门——第五节、从控制器访问模型中的数据
5.1 从控制器访问模型中的数据在本节中,我们将创建一个新的MoviesController类,并且书写代码来获取数据库中的数据,并通过视图模板来显示在浏览器中.鼠标右击Controller文件夹,点 ...