zoukankan      html  css  js  c++  java
  • 使用JavaScript判断图片是否加载完成的三种实现方式

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

    一、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> 
    

  • 相关阅读:
    Oracle创建上下文 SYS_CONTEXT
    闪回版本查询
    物化视图创建案例
    Oracle 多租户环境学习路线图
    【Mysql MHA】CentOS7.6+Mysql8.0.16 入坑
    【翻译】--19C Oracle 安装指导
    Docker(3)---常用命令
    Docker(2)---安装(设置镜像加速器)
    Docker(1)---基础概念
    AMQP高级消息队列协议
  • 原文地址:https://www.cnblogs.com/lodingzone/p/5214659.html
Copyright © 2011-2022 走看看