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 加载完成的事 ...
随机推荐
- SDP简要解析
1.概述SDP也是MMUSIC工作组的一个产品,在MBONE内容中用得很多.其目的就是在媒体会话中,传递媒体流信息,允许会话描述的接收者去参与会话.SDP基本上在internet上工作.他定义了会话画 ...
- mysql的主从复制配置
怎么安装mysql数据库,这里不说了,只说它的主从复制,步骤如下: 1.主从服务器分别作以下操作: 1.1.版本一致 1.2.初始化表,并在后台启动mysql 1.3.修改root的密码 2.修 ...
- UGUI Text控件
学习UGUI的Text控件,用于显示文本!. 基本属性就不再啰嗦了! Alignment: 文字以 水平和垂直 对齐方式, Horizontal Overflow: 水平 Wrap: 文字大小和数量 ...
- Spring定时任务的几种实现（转自iteye网gong1208）
原文地址: http://gong1208.iteye.com/blog/1773177 以下为正文: 近日项目开发中需要执行一些定时任务,比如需要在每天凌晨时候,分析一次前一天的日志信息,借此机会整 ...
- 代码中实际运用memcached——.NET
本文取自:http://blog.csdn.net/dyllove98/article/details/9115947 memcached安装:============================ ...
- Hide a file in a picture
有时候.假设你想在电脑上隐藏关键的文件而不想让其它人看见.你会怎么做呢?找一个专业的工具?为目录设置password?更改文件属性?这些方法可行.但它们可能不太方便和安全.这里,我给大家共享一个在图片 ...
- 求斐波那契数列的第n项
问题描述:斐波那契数列是这样的一个数列,1,1,2,3,5,8,..,即前两项都是1,后面每一项都是其前面两项的和. 现在要你求出该数列的第n项. 分析:该问题是一个经典的数列问题,相信大家在很多语言 ...
- SQL判断是否存在符合某条件的记录
IF EXISTS ( --判断是否存在合符条件的记录 ) FROM [DCL].[SecurityUser] WHERE [UserAccount] = @UserAccount ) BEGIN - ...
- [记录]关于vertical-align单/多选框与说明文字对齐效果
效果图: 第一张使用label标签,第二张没有使用.. 使用label标签,middle对齐方式的单选框下降了1px 而没有使用label标签,sub对齐方式的 却 居 中 了 =_= 不太理解 ...
- 求一组数字序列的分布情况(java)
最近需要做一个正态分布的函数图像所以要处理一段double序列 写了这个算法 先上效果图: 核心思想: 1先根据步长计算每一个区间 2循环进行判断序列中每个数属于哪个区间 3用一个数组来保存每一个区 ...