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

一、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. IE attachEvent事件处理程序(事件绑定的函数)的this指向的是window不是执行当前事件的dom元素

    IE attachEvent事件处理程序(事件绑定的函数)的this指向的是window不是执行当前事件的dom元素. attachEvent(type,listener); listener函数中的 ...

  2. POJ2239 二分图最大匹配

    问题:POJ2239 分析: 本题给出每门课程的上课时间,求最大选课数,可以转化为二分图最大匹配问题求解. 设集合A为课程集,集合B为上课时间集,根据输入建立二分图.最大选课书就是该二分图的最大匹配数 ...

  3. php中的MVC模式运用

    [size=5][color=Red]php中的MVC模式运用[/color][/size] 首先我来举个例子: 一个简单的文章显示系统 简单期间,我们假定这个文章系统是只读的,也就是说这个例子将不涉 ...

  4. Java之集合类

    出处:http://blog.csdn.net/zhangerqing 一.集合类简介 数组是很常用的一种的数据结构,我们用它可以满足很多的功能,但是,有时我们会遇到如下这样的问题: 1.我们需要该容 ...

  5. C语言编程时常犯十八个错误

    C语言的最大特点是:功能强.使用方便灵活.C编译的程序对语法检查并不象其它高级语言那么严格,这就给编程人员留下“灵活的余地”,但还是由于这个灵活给程序的调试带来了许多不便,尤其对初学C语言的人来说,经 ...

  6. jquery checkbox 全选、取消全选

    $("#checkall").click(function(){ $("input[name='uid']").prop("checked" ...

  7. ADT 连接手机运行android应用程序时报错

    The connection to adb is down, and a severe error has occured.    You must restart adb and Eclipse.  ...

  8. boost库使用：仿SGI-STL实现的一个树节点allocator

    ////////////////////////////////////////////////////////////////////////// //code by hzs //email: hu ...

  9. 【转】 树莓派学习笔记——I2C设备载入和速率设置

    原文网址:http://blog.csdn.net/xukai871105/article/details/18234075 1.载入设备 方法1——临时载入设备 sudo modprobe -r i ...

  10. Java vs Python

    面试时常问到这两种语言的区别,在此总结一下. Referrence: Udemy:python-vs-java Generally, Python is much simpler to use, an ...