JS判断图片是否加载完成方法汇总(最新版)


Posted in Javascript onMay 13, 2016

有时需要获取图片的尺寸,这需要在图片加载完成以后才可以。下面小编给大家整理了几种关于JS判断图片是否加载完成方法汇总,一起看看吧。

一、load事件

<script type="text/javascript">
$('img').onload = function() {
//code
}
</script>

优点:简单易用,不影响HTML代码。

缺点:只能指定一个元素,javascipt代码必须置于图片元素的下方

二、jquery方法

<script type="text/javascript">
$(function(){
$('.pic1').each(function() {
$(this).load(function(){
$(this).fadeIn();
});
});
})
</script>

注意,不要在$(document).ready()里绑定load事件。

优点:可以批量绑定元素事件,并且不影响HTML代码内容
缺点:需要jquery库的支持,代码需要放置到需要操作元素的下方。

三、readystatechange事件

<!DOCTYPE HTML>
<html> 
<head> 
<meta charset="utf-">
<title>img - readystatechange event</title>
</head> 
<body>
<img id="img" src="http://pic.win.com/wallpaper/f/cbbaea.jpg">
<p id="p">loading...</p>
<script type="text/javascript">
img.onreadystatechange = function() {
if(img.readyState=="complete"||img.readyState=="loaded"){ 
p.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则表明图片已经加载完毕,停止轮询。该属性所有浏览器都支持。

JS判断图片是否加载完成方法汇总(最新版)

以上内容是小编给大家介绍的JS判断图片是否加载完成方法汇总,希望对大家有所帮助,同时也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
原生js实现复制对象、扩展对象 类似jquery中的extend()方法
Aug 30 Javascript
JavaScript中使用自然对数ln的方法
Jun 14 Javascript
ros::spin() 和 ros::spinOnce()函数的区别及详解
Oct 01 Javascript
Angularjs实现带查找筛选功能的select下拉框示例代码
Oct 04 Javascript
react.js 获取真实的DOM节点实例(必看)
Apr 17 Javascript
js实现倒计时关键代码
May 05 Javascript
JavaScript的Object.defineProperty详解
Jul 09 Javascript
node.js之基础加密算法模块crypto详解
Sep 11 Javascript
JavaScript中this用法学习笔记
Mar 17 Javascript
JavaScript实现字符串与HTML格式相互转换
Mar 17 Javascript
JavaScript实现沿五角星形线摆动的小圆实例详解
Jul 28 Javascript
vue实现路由懒加载的3种方法示例
Sep 01 Javascript
BootStrap扔进Django里的方法详解
May 13 #Javascript
JavaScript重载函数实例剖析
May 13 #Javascript
JS加载iFrame出现空白问题的解决办法
May 13 #Javascript
基于JS判断iframe是否加载成功的方法(多种浏览器)
May 13 #Javascript
JS iFrame加载慢怎么解决
May 13 #Javascript
基于JS实现的笛卡尔乘积之商品发布
May 13 #Javascript
基于jQuery倒计时插件实现团购秒杀效果
May 13 #Javascript
You might like
php连接mysql数据库代码
2009/03/10 PHP
php调整gif动画图片尺寸示例代码分享
2013/12/05 PHP
php的慢速日志引起的Mysql错误问题分析
2014/05/13 PHP
laravel框架实现后台登录、退出功能示例
2019/10/31 PHP
建立良好体验度的Web注册系统ajax
2007/07/09 Javascript
Colortip基于jquery的信息提示框插件在IE6下面的显示问题修正方法
2010/12/06 Javascript
15个款优秀的 jQuery 图片特效插件推荐
2011/11/21 Javascript
JavaScript判断是否为数字的4种方法及效率比较
2015/04/01 Javascript
原生js页面滚动延迟加载图片
2015/12/20 Javascript
动态的9*9乘法表效果的实现代码
2016/05/16 Javascript
javascript的replace方法结合正则使用实例总结
2016/06/16 Javascript
js事件源window.event.srcElement兼容性写法(详解)
2016/11/25 Javascript
如何理解Vue的.sync修饰符的使用
2017/08/17 Javascript
vue组件之Alert的实现代码
2017/10/17 Javascript
vue组件间通信子与父详解(二)
2017/11/07 Javascript
nodejs 最新版安装npm 的使用详解
2018/01/18 NodeJs
JS常见DOM节点操作示例【创建 ,插入,删除,复制,查找】
2018/05/14 Javascript
vue-router懒加载速度缓慢问题及解决方法
2018/11/25 Javascript
深入理解令牌认证机制(token)
2019/08/22 Javascript
Python魔术方法详解
2015/02/14 Python
Python实现对excel文件列表值进行统计的方法
2015/07/25 Python
举例讲解Linux系统下Python调用系统Shell的方法
2015/11/07 Python
Python3.5面向对象程序设计之类的继承和多态详解
2019/04/24 Python
python 实现从高分辨图像上抠取图像块
2020/01/02 Python
如何用Python和JS实现的Web SSH工具
2021/02/23 Python
TUMI澳大利亚网站:美国旅行箱包品牌
2017/03/27 全球购物
Quiksilver美国官网:始于1969年的优质冲浪服和滑雪板外套
2020/04/20 全球购物
青年教师培训方案
2014/02/06 职场文书
酒店端午节促销方案
2014/02/18 职场文书
班级道德讲堂实施方案
2014/02/24 职场文书
《美丽的黄昏》教学反思
2014/02/28 职场文书
小学生优秀评语大全
2014/04/22 职场文书
部门2014年度工作总结
2014/11/12 职场文书
2016优秀护士先进个人事迹材料
2016/02/25 职场文书
求职自荐信该如何书写?
2019/06/24 职场文书
React如何创建组件
2021/06/27 Javascript