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则表明图片已经加载完毕，停止轮询。该属性所有浏览器都支持。
<!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>JavaScript判断图片是否加载完成的三种方式 (转)的更多相关文章
- JavaScript判断图片是否加载完成的三种方式
JavaScript判断图片是否加载完成的三种方式 有时需要获取图片的尺寸,这需要在图片加载完成以后才可以.有三种方式实现,下面一一介绍. 一.load事件 1 2 3 4 5 6 7 8 9 10 ...
- 使用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: ...
随机推荐
- [转] VS2015中跑OpenGL红宝书第八版的第一章示例代码，运行
Ori Article Link OpenGL的东西快忘光了,把角落的第八版红宝书拿出来复习一下 从书中的地址下了个示例代码结果新系统(Win10+VS2015)各种跑不起来,懊恼之后在网上疯狂搜索资 ...
- 【IntelliJ IDEA】Debug调试的使用记录
Debug调试是否能行云流水的使用,是鉴定你会不会使用一个IDE的最基本的标准. 今天再这里把Idea的debug使用流程走一遍. ================================== ...
- The web application [/struts2_0100] created a ThreadLocal with key of type
引用: 严重: The web application [/struts2_0100] created a ThreadLocal with key of type [com.opensymphony ...
- SFTP & FTP Upload
简述 >> FTP: 1. Install FTP service on Linux(Red Hat) as root user [root]# yum install ftp 2. ...
- AlphaGo GITHUB
AlphaGo GITHUB https://github.com/Rochester-NRT/AlphaGo
- SQL must not be null（低级错误）
提醒一下: 数据库数据源配置出错,也会发生这种低级错误的.
- MD5算法了解(JAVA实现)
MD5算法:尽管已经被破解,但任然广泛应用于各个领域中 如文件校验:当我们下载文件时为了保证文件的安全性,我们能够在其站点上找到相应的md5值进行校验,假设md5值不一致,也就是说文件被人动过(一般都 ...
- MongoDB基本文件操作
MongoDB中主要的文件操作有put.get.list.search几种.能够非常方便地进行文件存储于查找,下面是一个简单的演示样例. 1.利用dd命令生成要求大小随机文件 2.使用put命令将生 ...
- 常用快递API及快递在线下单API分享
1.常用快递API 支持顺丰.EMS.申通.圆通.韵达.汇通.中通.天天.德邦.全峰等主流快递公司. 文档地址:https://www.juhe.cn/docs/api/id/43 1.1常用快递查询 ...
- Iowait的成因、对系统影响及对策
什么是iowait?顾名思义,就是系统因为io导致的进程wait.再深一点讲就是:这时候系统在做io,导致没有进程在干活,cpu在执行idle进程空转,所以说iowait的产生要满足两个条件,一是进程 ...