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

一、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. Oracle11g R2学习系列 之十 解决EM不能用

    不知道是什么原因https://localhost:1158/em,今天突然就不能用了.做了好多搜索也没有解决.现象是在services.msc中,不能重启OracleDBConsole服务,提示: ...

  2. python学习第二天 --变量及其字符串

    python变量: 在计算机程序中,变量不仅可以是数字,还可以是任意数据类型. 在Python程序中,变量是用一个变量名表示,变量名必须是大小写英文.数字和下划线(_)的组合,且不能用数字开头. 在P ...

  3. 如何实现SQL事务的提交，又不对外进行污染

    一.以下是本人的一点思路: 1.在事务方法中,参数运用委托Func,选用Func 的原因是多入参,单一出参2.事务传参运用泛型,选用泛型的原因是可以减少代码量,类型安全 二.说明中涉及4个类:1.Or ...

  4. 《转》ACTIONBAR-PULLTOREFRESHLIBS+沉浸式在部分手机上的布局错乱,目前知道的三星系统（TouchWiz）

    转载:http://www.cnblogs.com/wubingshenyin/p/4413672.html(原文连接) 前段时间看见ActionBar-PullToRefreshLibs用来刷新很好 ...

  5. Java BufferedWriter与BufferedReader操作文本文件

    /** * 采用字符流读取写入文本文件 */ public class FileUtil { /** * 写文件 * @param fileName * @param content */ publi ...

  6. Android setTextColor无效_安卓setTextColor()的参数设置方式

    通过代码setTextColor时.如果color是一个资源文件 会set失败 没有效果 遇到这样的情况有两种解决办法.亲测过.两种都是有效的 一.注解方式 通过在方法上面添加注解解决问题 代码如下 ...

  7. Linux——oracle数据库实例启动关闭（转）

    -->Oracle 数据库实例启动关闭过程 --================================ [root@robinson ~]# su - oracle --查看未启动实例 ...

  8. STL容器是否是线程安全的

    转载http://blog.csdn.net/zdl1016/article/details/5941330 STL的线程安全. 说一些关于stl容器的线程安全相关的话题. 一般说来,stl对于多线程 ...

  9. Linux上夏时令的应对

    问题 今天,有游戏客户找来说,2016.11.6号洛杉矶将会进入冬时令,他们在洛杉矶机房的ECS在使用的是洛杉矶的当地时间,问我,进入冬时令,对他们的linux有啥影响?是否需要做好,批量修改linu ...

  10. poj 3180 The Cow Prom（tarjan+缩点 easy）

    Description The N ( <= N <= ,) cows are so excited: it's prom night! They are dressed in their ...