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>
轮询不断监测img的complete属性，如果为true则表明图片已经加载完毕，停止轮询。该属性所有浏览器都支持。
JavaScript判断图片是否加载完成的更多相关文章
- JavaScript判断图片是否加载完成的三种方式
JavaScript判断图片是否加载完成的三种方式 有时需要获取图片的尺寸,这需要在图片加载完成以后才可以.有三种方式实现,下面一一介绍. 一.load事件 1 2 3 4 5 6 7 8 9 10 ...
- 使用JavaScript判断图片是否加载完成的三种实现方式
有时需要获取图片的尺寸,这需要在图片加载完成以后才可以.有三种方式实现,下面一一介绍. 一.load事件 <!DOCTYPE HTML> <html> <head> ...
- JavaScript判断图片是否加载完成的三种方式 (转)
一.load事件 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 <!DOCTYPE HTML> <html> <head> ...
- javascript判断图片是否加载完成方法整理
有时候我们在前端开发工作中为了获取图片的信息,需要在图片加载完成后才可以正确的获取到图片的大小尺寸,并且执行相应的回调函数使图片产生某种显示效果.本文主要整理了几种常见的javascipt判断图片加载 ...
- JavaScript实现判断图片是否加载完成的3种方法整理
JavaScript实现判断图片是否加载完成的3种方法整理 有时候我们在前端开发工作中为了获取图片的信息,需要在图片加载完成后才可以正确的获取到图片的大小尺寸,并且执行相应的回调函数使图片产生某种显示 ...
- 基于javascript实现图片懒加载（亲测有效）
这篇文章主要介绍了javascript实现图片懒加载的方法及思路,有时我们需要用懒加载,也就是延迟加载图片的方式,来提高网站的亲和力,需要的朋友可以参考下! 一.定义 图片延迟加载也称为懒加载,延迟加 ...
- JS判断图片是否加载完成三种方式
1.img的complete属性 轮询不断监测img的complete属性,如果为true则表明图片已经加载完毕,停止轮询.该属性所有浏览器都支持. <p id="p1"&g ...
- Javascript兑现图片预加载【回调函数，多张图片】 (转载)
Javascript实现图片预加载[回调函数,多张图片] 使用JS实现一组图片动画效果或者使用HTML5 Canvas渲染一系列图片等案例中,需要图片全部加载完成方可运行动画效果.此时程序中就会涉及多 ...
- js 判断图片是否加载完成(使用 onload 事件)
我们在写 jquery 的时候一般都会写 $(document).ready,加载完成事件还有一个就是 onload onload 与 ready 的区别是: 1.ready 是 DOM 加载完成的事 ...
随机推荐
- kvm 图形化安装
为了再后续查看方便,我还是完整的记录kvm图形化安装. 介于网络环境的原因,我选择NAT. 2,安装kvm前的准备工作 2.1 关闭防火墙 setenforce 0 vi /etc/sysco ...
- onvif规范的实现：server端Discovery实现，通过OnvifTestTool12.06测试
说明:网上关于ONVIF开发的文章并不多,也更找不到具体的实例来入门学习.只能靠翻阅各种Specification摸索中前进,下面是最近几天的成果.调通了服务端(或者说设备端)的Discovery,使 ...
- Hadoop： HDFS 格式化时，出现 “ERROR namenode.NameNode: java.io.IOException: Cannot create directory /usr/hadoop/tmp/dfs/name/current”
原因是 没有设置 /usr/hadoop/tmp 的权限没有设置, 将之改为: chown –R hadoop:hadoop /usr/hadoop/tmp 查看:
- mapkit定位以及俯视视图
1.导入框架MapKit.framework,CoreGraphics.framework
- BeanUtils 以及BeanUtils.populate使用
Apache Jakarta Commons项目非常有用.我曾在许多不同的项目上或直接或间接地使用各种流行的commons组件.其中的一个强大的组件就是BeanUtils.我将说明如何使用BeanUt ...
- F - The Circumference of the Circle
Description To calculate the circumference of a circle seems to be an easy task - provided you know ...
- php 字符串
<?php /* * 字符串输出 * echo() 输出多个或多个字符串 * print() 输出字符串 * printf()格式化输出字符串 * 字符串截取 * substr() 对字符进行指 ...
- tornado.web.Application类配置及使用
Application configuration classtornado.web.Application(handlers=None, default_host='', transforms=No ...
- C语言基础09
指向结构体变量的指针叫做结构体指针: typedef struct { int num; char name[30]; // char *name; 程序会崩溃,*name本身是指针,没有什么空 ...
- Lwip lwip_recvfrom函数一个数据包不能分多次读取。
最近在写一个基于Lwip协议栈的网络程序,对于一包数据,想先获得包头信息,再根据包头信息读取后面的数据,但是调用recvfrom后,发现读取后面的数据读取不到,进一步查阅发现,原来对于UDP协议,一次 ...