JavaScript判断图片是否加载完成的三种方式
JavaScript判断图片是否加载完成的三种方式
有时需要获取图片的尺寸,这需要在图片加载完成以后才可以。有三种方式实现,下面一一介绍。
一、load事件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
<!DOCTYPE HTML> <html> <head> <meta charset= "utf-8" > <title>img - load event</title> </head> <body> <p id= "p1" >loading...</p> <script type= "text/javascript" > img1.onload = function () { p1.innerHTML = 'loaded' } </script> </body> </html> |
测试,所有浏览器都显示出了“loaded”,说明所有浏览器都支持img的load事件。
二、readystatechange事件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
<!DOCTYPE HTML> <html> <head> <meta charset= "utf-8" > <title>img - readystatechange event</title> </head> <body> <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属性
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
<!DOCTYPE HTML> <html> <head> <meta charset= "utf-8" > <title>img - complete attribute</title> </head> <body> <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> |
轮询不断监测img的complete属性,如果为true则表明图片已经加载完毕,停止轮询。该属性所有浏览器都支持。
JavaScript判断图片是否加载完成的三种方式的更多相关文章
- JavaScript判断图片是否加载完成的三种方式 (转)
一.load事件 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 <!DOCTYPE HTML> <html> <head> ...
- 使用JavaScript判断图片是否加载完成的三种实现方式
有时需要获取图片的尺寸,这需要在图片加载完成以后才可以.有三种方式实现,下面一一介绍. 一.load事件 <!DOCTYPE HTML> <html> <head> ...
- JavaScript实现判断图片是否加载完成的3种方法整理
JavaScript实现判断图片是否加载完成的3种方法整理 有时候我们在前端开发工作中为了获取图片的信息,需要在图片加载完成后才可以正确的获取到图片的大小尺寸,并且执行相应的回调函数使图片产生某种显示 ...
- JQuery的几种页面加载完执行三种方式
jquery加载页面的方法(页面加载完成就执行) 1. $(function(){ $("#a").click(function(){ //adding your code h ...
- JavaScript判断图片是否加载完成
一.load事件 <!DOCTYPE HTML><html> <head> <meta charset="utf-8"> ...
- 前端实现图片懒加载(lazyload)的两种方式
在实际的项目开发中,我们通常会遇见这样的场景:一个页面有很多图片,而首屏出现的图片大概就一两张,那么我们还要一次性把所有图片都加载出来吗?显然这是愚蠢的,不仅影响页面渲染速度,还浪费带宽.这也就是们通 ...
- java加载配置文件的三种方式
比如我们要加载db.properties文件 如图: 比如我们要加载source目录下的db.properties文件.就有以下几种方式 第一种是文件io流: public static void l ...
- javascript判断图片是否加载完成方法整理
有时候我们在前端开发工作中为了获取图片的信息,需要在图片加载完成后才可以正确的获取到图片的大小尺寸,并且执行相应的回调函数使图片产生某种显示效果.本文主要整理了几种常见的javascipt判断图片加载 ...
- easyui datagrid加载数据的三种方式
1.加载本地数据 var obj = {"total":2,"rows":[{id:"1",name:"一"},{id: ...
随机推荐
- CF724C: Ray Tracing
传送门 CF的题质量真心不低,这道题的标准解法(应该)是exgcd,打比赛的时候想到了具体的推导公式了,也意识到了需要用exgcd,但是因为寝室要锁门了(其实就是太弱,就放弃了. 首先很显然,这条线所 ...
- BZOJ1812 [IOI2005]river
传送门: 很常规的一道树规,转为左儿子右兄弟. 然后$f[node][anc][K]$表示在node节点上,最近的有贡献祖先在anc上,在node的儿子和兄弟上有k个有贡献节点的最优值. 然后得出以下 ...
- 第二轮冲刺-Runner站立会议02
今天做了什么:查看gridview与baseadapter适配器 遇到的困难:继续gridview与baseadapter适配器 明天准备做什么:没有弄懂gridview与baseadapter适配器 ...
- Java排序算法——归并排序
import java.util.Arrays; //================================================= // File Name : MergeSor ...
- Random类
Random类是随机数产生类,可以指定一个随机数的范围,然后任意产生在此范围中的数字. //================================================= // F ...
- Python特殊语法:filter、map、reduce、lambda [转]
Python特殊语法:filter.map.reduce.lambda [转] python内置了一些非常有趣但非常有用的函数,充分体现了Python的语言魅力! filter(function, s ...
- php----显示中文乱码的问题
条件: 在显示页面设置页面编码格式为<?php header('Content-Type: text/html; charset=utf-8');?>: 在写入数据库时设置:mysql_q ...
- Ctrl+Scroll改变所有Editor的缩放比例 (Code::Blocks)
Settings > Editor > Zooming resizes all editors
- Ubuntu 15.10安装KVM
1.查看cpu是否支持硬件虚拟化 egrep "svm|vmx" /proc/cpuinfo 2.安装KVM apt-get install qemu-kvm virt-manag ...
- SHIFT后门拿服务器之方法总结
提权工具如下:cmd.exe Churrasco.exe nc.exe 提权前提:Wscript组件成功开启 如果Wscript组件被关闭,则使用以下方法开启: 源代码: <object run ...