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

一、load事件

  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>img - load event</title>
  6. </head>
  7. <body>
  8. <img id="img1" src="http://pic1.win4000.com/wallpaper/f/51c3bb99a21ea.jpg">
  9. <p id="p1">loading...</p>
  10. <script type="text/javascript">
  11. 	img1.onload = function() {
  12. 		p1.innerHTML = 'loaded';
  13. 	}
  14. </script>
  15. </body>
  16. </html>

测试，所有浏览器都显示出了“loaded”，说明所有浏览器都支持img的load事件。

二、readystatechange事件

  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>img - readystatechange event</title>
  6. </head>
  7. <body>
  8. <img id="img1" src="http://pic1.win4000.com/wallpaper/f/51c3bb99a21ea.jpg">
  9. <p id="p1">loading...</p>
  10. <script type="text/javascript">
  11. img1.onreadystatechange = function() {
  12. 	if(img1.readyState=="complete"||img1.readyState=="loaded"){
  13. 		p1.innerHTML = 'readystatechange:loaded'
  14. 	}
  15. }
  16. </script>
  17. </body>
  18. </html>

readyState为complete和loaded则表明图片已经加载完毕。测试IE6-IE10支持该事件，其它浏览器不支持。

三、img的complete属性

  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>img - complete attribute</title>
  6. </head>
  7. <body>
  8. <img id="img1" src="http://pic1.win4000.com/wallpaper/f/51c3bb99a21ea.jpg">
  9. <p id="p1">loading...</p>
  10. <script type="text/javascript">
  11. 	function imgLoad(img, callback) {
  12. 		var timer = setInterval(function() {
  13. 			if (img.complete) {
  14. 				callback(img)
  15. 				clearInterval(timer)
  16. 			}
  17. 		}, 50)
  18. 	}
  19. 	imgLoad(img1, function() {
  20. 		p1.innerHTML('加载完毕')
  21. 	})
  22. </script>
  23. </body>
  24. </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.BannerRotator.js

    项目地址:https://github.com/snipertulip/BannerRotator 演示地址:http://snipertulip.github.io/BannerRotator/de ...

  2. 安装 adobe flash player

    安装方法:     1. 下载Adobe Flash Player:        http://fpdownload.macromedia.com/get/flashplayer/pdc/11.2. ...

  3. async 异步流程控制规则

    github 学习async网址 : https://github.com/caolan/async/ 1.Async 函数介绍 async 主要实现了三个部分的流程控制功能 1.集合:Collect ...

  4. UIWebView与JavaScript(JS) 回调交互 -备

    很多关于objc 与 js 交互的文章都比较适用于 mac开发,iOS的webview 还是有所不一样, 参考:http://blog.sina.com.cn/s/blog_693de6100102v ...

  5. 【经验】在CSS中定义a:link、a:visited、a:hover、a:active顺序

    摘自:http://www.qianyunlai.com/post-2.html     以前用CSS一直没有遇到过这个问题,在最近给一个本科同学做的项目里面.出现一些问题,搜索引擎查了一些网站和资料 ...

  6. initEvent vs initMouseEvent

    var evt = document.createEvent("MouseEvents");evt.initMouseEvent("click", true, ...

  7. REDIS主从配置及切换

    最近公司项目也用上了.但有个点没有弄很明白. requirepass只是给CLIENT认证用的,还是同时给从REDIS认证用的?(masterauth) 一般的思路是主服务器不开AOF,从服务器打开A ...

  8. LeetCode_Sort Colors

    Given an array with n objects colored red, white or blue, sort them so that objects of the same colo ...

  9. 【剑指offer】面试题34：丑数

    题目: 把只包含因子2.3和5的数称作丑数(Ugly Number).例如6.8都是丑数,但14不是,因为它包含因子7. 习惯上我们把1当做是第一个丑数.求按从小到大的顺序的第N个丑数. 思路: 第一 ...

  10. Hdu3714-Error Curves(三分)

    Josephina is a clever girl and addicted to Machine Learning recently. She pays much attention to a m ...