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

一、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. 关于jquery-easyUI中主键属性data-options的了解

    data-options是jQuery Easyui 最近两个版本才加上的一个特殊属性.通过这个属性,我们可以对easyui组件的实例化可以完全写入到html中,例如: <div class=& ...

  2. Hdu1095

    #include <stdio.h> int main() { int a,b; while(scanf("%d %d",&a,&b)!=EOF){ p ...

  3. POJ 1379 Run Away

    题意:有n个陷阱,在X,Y范围内要求出一个点使得这个点到陷阱的最小距离最大. 思路:模拟退火,随机撒入40个点,然后模拟退火随机化移动. (这题poj坑爹,加了srand(time(NULL))不能交 ...

  4. sign starfieldtech

    signtool sign /f certfile.pfx /p password /tr http://tsa.starfieldtech.com /td SHA256 mycode.exe htt ...

  5. ANDROID使用MULTIPARTENTITYBUILDER实现类似FORM表单提交方式的文件上传

    最近在做 Android 端文件上传,要求采用 form 表单的方式提交,项目使用的 afinal 框架有文件上传功能,但是始终无法与php写的服务端对接上,无法上传成功.读源码发现:afinal 使 ...

  6. uva 10401 Injured Queen Problem(dp)

    题目链接:10401 - Injured Queen Problem 题目大意:给出一个字符串,要求在n * n(n为字符串的长度)的棋盘上摆放n个受伤的皇后,受伤的皇后只能攻击到同一列和它周围8个格 ...

  7. UML--建模

    建模公式 这种精华的东西,一定是值得研读和实践的! myself:人,事,物,规则. 人,业务主角.业务工人.参与者.如果应用到教务系统中,就是管理员,主任,老师的关系. 事,业务用例,系统用例. 物 ...

  8. WEB打印插件Lodop

    Lodop.C-Lodop使用说明及样例   Lodop(标音:劳道谱,俗称:露肚皮)是专业WEB控件,用它既可裁剪输出页面内容,又可用程序代码直接实现 复杂打印.控件功能强大,却简单易用,所有调用如 ...

  9. C#关闭显示屏，使显示屏处于待机状态

    class Program { private const uint WM_SYSCOMMAND = 0x112; //系统消息 private const int SC_MONITORPOWER = ...

  10. php利用pdo进行mysql的事务处理机制

    想进行php的事务处理有下面几个步骤 1.关闭自动提交 2.开启事务处理 3.有异常就自动抛出异常提示再回滚 4.开启自动提交 下面是一个小示例利用pdo进行的php mysql事务处理,注意mysq ...