有时需要获取图片的尺寸，这需要在图片加载完成以后才可以。有三种方式实现，下面一一介绍。

一、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判断图片是否加载完成的三种实现方式的更多相关文章

  1. JavaScript判断图片是否加载完成的三种方式

    JavaScript判断图片是否加载完成的三种方式 有时需要获取图片的尺寸,这需要在图片加载完成以后才可以.有三种方式实现,下面一一介绍. 一.load事件 1 2 3 4 5 6 7 8 9 10 ...

  2. JavaScript判断图片是否加载完成的三种方式 (转)

    一.load事件 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 <!DOCTYPE HTML> <html> <head>      ...

  3. JavaScript实现判断图片是否加载完成的3种方法整理

    JavaScript实现判断图片是否加载完成的3种方法整理 有时候我们在前端开发工作中为了获取图片的信息,需要在图片加载完成后才可以正确的获取到图片的大小尺寸,并且执行相应的回调函数使图片产生某种显示 ...

  4. JavaScript判断图片是否加载完成

    一.load事件 <!DOCTYPE HTML><html> <head>     <meta charset="utf-8">   ...

  5. javascript判断图片是否加载完成方法整理

    有时候我们在前端开发工作中为了获取图片的信息,需要在图片加载完成后才可以正确的获取到图片的大小尺寸,并且执行相应的回调函数使图片产生某种显示效果.本文主要整理了几种常见的javascipt判断图片加载 ...

  6. 基于javascript实现图片懒加载（亲测有效）

    这篇文章主要介绍了javascript实现图片懒加载的方法及思路,有时我们需要用懒加载,也就是延迟加载图片的方式,来提高网站的亲和力,需要的朋友可以参考下! 一.定义 图片延迟加载也称为懒加载,延迟加 ...

  7. JS判断图片是否加载完成三种方式

    1.img的complete属性 轮询不断监测img的complete属性,如果为true则表明图片已经加载完毕,停止轮询.该属性所有浏览器都支持. <p id="p1"&g ...

  8. Javascript兑现图片预加载【回调函数，多张图片】 (转载)

    Javascript实现图片预加载[回调函数,多张图片] 使用JS实现一组图片动画效果或者使用HTML5 Canvas渲染一系列图片等案例中,需要图片全部加载完成方可运行动画效果.此时程序中就会涉及多 ...

  9. js 判断图片是否加载完成(使用 onload 事件)

    我们在写 jquery 的时候一般都会写 $(document).ready,加载完成事件还有一个就是 onload onload 与 ready 的区别是: 1.ready 是 DOM 加载完成的事 ...

随机推荐

  1. NoSql中的B-tree、B+tree和LSM-tree

    总结: 1.B+树将数据完全排序,读数据时很快,但当要修改数据时,就需要将新入数据下面的数据重新排位,特别是当写入的数据排在较高的位置时,需要大量的移位操作才能完成写入. 2.SLM牺牲部分的读性能, ...

  2. js delete 用法

    1,对象属性删除   function fun(){ this.name = 'mm'; } var obj = new fun(); console.log(obj.name);//mm delet ...

  3. PHP数组foreach后使用current取值的问题

    先看如下的代码 $arr=['a','b','c']; foreach ($arr as $v){ echo $v.'<br>'; } var_dump(current($arr)); 今 ...

  4. /users/products.:format 这种写法的其对应解析字符写法

    “products.:format" 这种写法可以有对应的下面两种路由形式 /products.json /products.xml "products.:format?" ...

  5. 什么是REST架构 - z

    什么是REST架构 - z   REST架构风格是全新的针对Web应用的开发风格,是当今世界最成功的互联网超媒体分布式系统架构,它使得人们真正理解了Http协议本来面貌.随着 REST架构成为主流技术 ...

  6. 设置EntityFramework 在开发时自动更新数据库

    1. NuGet 下载EntityFramework. 2. 定义Context 和 打开NuGet 命令 执行 Enable-Migrations , Libaray.DAL.Migrations. ...

  7. 安卓开发中ScrollView不能用RelativeLayout的解决方案

    RelativeLayout的意义: 布局各个部件的相对布局.使得界面空间合理利用. 一.ScrollView局限: 滑动的只能是linearlayout,甚至整个布局都不能有RelativeLayo ...

  8. php将会话保存在数据库里

    php默认把会话保存在临时文件中,保存在数据库中可以提高安全性,在共享主机服务器上,所有web站点都使用同一个临时目录,这意味着数十个程序都在同一位置进行文件读取的操作,我们很容易就编写一个脚本从这个 ...

  9. 转：完善eclipse+pdt作php开发中的代码提示能力

    在eclipse开发中 ,可能由于各种原因导致项目文件(eclipse内置)丢失或错乱, 因而, 失去一些能力.. 以下是经过被痛苦折磨后查阅总结的一点东西 设置完下面内容, 支持以下特性 PHP: ...

  10. 通过基于 Linux 的软件 VPN 设备连接到 Windows Azure 虚拟网络

    摘要 本文章将说明如何通过使用软件 VPN 设备,将本地办公室或站点连接到 Windows Azure 虚拟网络.在构建原型或在构建可以尽快利用云的"开发/测试"工作流时,软件VP ...