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

一、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. EasyShortcut Easyshortcut easyShortcut 简介

    关于EasyShortcut Easyshortcut easyShortcut 简介: 参考: http://chunsheng.me/EasyShortcut/

  2. Kendo Web UI Grid里时间格式转换

    我和大家分享一下我的kendo的学习心得.如果不好的地方多多包含或者给我留言请看图 kendo里时间格式如图Oder Date列里的格式.但是我们想把时间转换成中国人习惯的格式.如Shipped Da ...

  3. fiddler2使用文档

    http://www.trinea.cn/android/android-network-sniffer/

  4. 异常处理：你不可能总是对的2 - 零基础入门学习Python033

    异常处理:你不可能总是对的2 让编程改变世界 Change the world by program 我们已经了解足够多的可能碰到的异常,那我们这节课就来谈谈如何检测这些异常并处理它们. 异常检测我们 ...

  5. [TYVJ] P1027 木瓜地

    木瓜地 背景 Background USACO OCT09 4TH   描述 Description Bessie不小心游荡出Farmer John的田地,而走进了相邻的农民的地.她举起一个木瓜,木瓜 ...

  6. hdu 1317 XYZZY

    http://acm.hdu.edu.cn/showproblem.php?pid=1317 #include <cstdio> #include <queue> #inclu ...

  7. Codeforces 509F Progress Monitoring

    http://codeforces.com/problemset/problem/509/F 题目大意:给出一个遍历树的程序的输出的遍历顺序b序列,问可能的树的形态有多少种. 思路:记忆化搜索 其中我 ...

  8. Qt Creator快捷键大全，附快捷键配置方法

    一.快捷键配置方法:   进入“工具->选项->环境->键盘”即可配置快捷键.   二.常用默认快捷键:   编号 快捷键 功能 1 Esc 切换到代码编辑状态 2 F1 查看帮助( ...

  9. Eclipse-cdt 配合 gdbserver 进行 arm 程序远程调试 上

    做嵌入式Linux开发也不用再羡慕windows程序员VS集成开发环境的强大,我们同样能够搭建出给力的IDE. 今天在这里记录一下我使用Eclipse-cdt,gdb,gdbserver搭建远程arm ...

  10. OpenWrt openssl library

    Please install the openssl library (with development headers) sudo apt-get install libssl; rite fail ...