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 相关文章推荐
this[] 指的是什么内容 讨论
Mar 24 Javascript
javascript操作cookie_获取与修改代码
May 21 Javascript
javascript document.compatMode兼容性
Feb 23 Javascript
Javascript前端UI框架Kit使用指南之kitjs事件管理
Nov 28 Javascript
浅谈javascript面向对象程序设计
Jan 21 Javascript
谈谈JavaScript自定义回调函数
Oct 18 Javascript
微信小程序 页面跳转及数据传递详解
Mar 14 Javascript
vue的Virtual Dom实现snabbdom解密
May 03 Javascript
详解AngularJS1.6版本中ui-router路由中/#!/的解决方法
May 22 Javascript
使用javascript函数编写简单银行取钱存钱流程
May 26 Javascript
React中使用UEditor百度富文本的方法
Aug 22 Javascript
three.js 将图片马赛克化的示例代码
Jul 31 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 5.3.1 安装包 VC9 VC6不同版本的区别是什么
2010/07/04 PHP
PHP基础知识介绍
2013/09/17 PHP
强制PHP命令行脚本单进程运行的方法
2014/04/15 PHP
PHP结合Redis+MySQL实现冷热数据交换应用案例详解
2019/07/09 PHP
Js判断CSS文件加载完毕的具体实现
2014/01/17 Javascript
jQuery操作select下拉框的text值和value值的方法
2014/05/31 Javascript
jQuery插件autocomplete使用详解
2017/02/04 Javascript
微信小程序 基础知识css样式media标签
2017/02/15 Javascript
vue-cli 组件的导入与使用教程详解
2018/04/11 Javascript
vue 做移动端微信公众号采坑经验记录
2018/04/26 Javascript
对angular4子路由&amp;辅助路由详解
2018/10/09 Javascript
详解react-refetch的使用小例子
2019/02/15 Javascript
JS用最简单的方法实现四舍五入
2019/08/27 Javascript
解决layer.prompt无效的问题
2019/09/24 Javascript
浅谈Vue.js之初始化el以及数据的绑定说明
2019/11/14 Javascript
angular8和ngrx8结合使用的步骤介绍
2019/12/01 Javascript
解决Vue router-link绑定事件不生效的问题
2020/07/22 Javascript
代码块高亮可复制显示js插件highlight.js+clipboard.js整合
2021/02/15 Javascript
Python学习_几种存取xls/xlsx文件的方法总结
2018/05/03 Python
手把手教你如何安装Pycharm(详细图文教程)
2018/11/28 Python
python 将字符串中的数字相加求和的实现
2019/07/18 Python
详解用Python为直方图绘制拟合曲线的两种方法
2019/08/21 Python
Python jieba库用法及实例解析
2019/11/04 Python
python实现Oracle查询分组的方法示例
2020/04/30 Python
萨克斯第五大道精品百货店: Saks Fifth Avenue
2017/04/28 全球购物
神路信息Java面试题目
2013/03/31 面试题
高中数学教师求职信
2013/10/30 职场文书
园林技术个人的自我评价
2014/02/15 职场文书
小学数学国培感言
2014/03/10 职场文书
离婚财产处理协议书
2014/09/30 职场文书
青年志愿者服务活动总结
2015/05/06 职场文书
在职证明范本
2015/06/15 职场文书
python 通过使用Yolact训练数据集
2021/04/06 Python
vue项目两种方式实现竖向表格的思路分析
2021/04/28 Vue.js
PHP设计模式(观察者模式)
2021/07/07 PHP
opencv检测动态物体的实现
2021/07/21 Python