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注意img图片的onerror事件的分析
Jan 01 Javascript
简短几句 通俗解释javascript的闭包
Jan 17 Javascript
Javascript中 关于prototype属性实现继承的原理图
Apr 16 Javascript
js保留小数点后几位的写法
Jan 03 Javascript
解决jquery版本冲突的有效方法
Sep 02 Javascript
JavaScript提高性能知识点汇总
Jan 15 Javascript
AngularJS基础 ng-model 指令详解及示例代码
Aug 02 Javascript
基于vue 动态加载图片src的解决方法
Feb 05 Javascript
vue2.0安装style/css loader的方法
Mar 14 Javascript
vue+iview动态渲染表格详解
Mar 19 Javascript
关于JS解构的5种有趣用法
Sep 05 Javascript
Javascript 关于基本类型和引用类型的个人理解
Nov 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获取当前完整URL地址的函数
2014/12/21 PHP
在PHP 7下安装Swoole与Yar,Yaf的方法教程
2017/06/02 PHP
PHP开发之归档格式phar文件概念与用法详解【创建,使用,解包还原提取】
2017/11/17 PHP
关于jquery的多个选择器的使用示例
2013/10/18 Javascript
js中判断用户输入的值是否为空的简单实例
2013/12/23 Javascript
JS、DOM和JQuery之间的关系示例分析
2014/04/09 Javascript
JavaScript对数字的判断与处理实例分析
2015/02/02 Javascript
JS实现图片平面旋转的方法
2016/03/01 Javascript
JS button按钮实现submit按钮提交效果
2016/11/01 Javascript
Vue.js 2.0中select级联下拉框实例
2017/03/06 Javascript
JS实现按钮颜色切换效果
2020/09/05 Javascript
利用js实现前后台传送Json的示例代码
2018/03/29 Javascript
微信小程序自定义多列选择器使用详解
2019/06/21 Javascript
Python常见文件操作的函数示例代码
2011/11/15 Python
python计算书页码的统计数字问题实例
2014/09/26 Python
Python使用MySQLdb for Python操作数据库教程
2014/10/11 Python
利用Python脚本在Nginx和uwsgi上部署MoinMoin的教程
2015/05/05 Python
python实现爬虫统计学校BBS男女比例之数据处理(三)
2015/12/31 Python
学习python 之编写简单乘法运算题
2016/02/27 Python
详解Python异常处理中的Finally else的功能
2017/12/29 Python
使用python爬虫实现网络股票信息爬取的demo
2018/01/05 Python
Python聊天室程序(基础版)
2018/04/01 Python
python基础教程项目五之虚拟茶话会
2018/04/02 Python
Python+OpenCV图片局部区域像素值处理详解
2019/01/23 Python
Python headers请求头如何实现快速添加
2020/11/03 Python
10个示例带你掌握python中的元组
2020/11/23 Python
美国百年历史早餐食品供应商:Wolferman’s
2017/01/18 全球购物
英国知名美妆护肤在线商城:Zest Beauty
2018/04/24 全球购物
印度在线杂货店:bigbasket
2018/08/23 全球购物
机修工岗位职责
2013/11/24 职场文书
人事行政专员岗位职责
2014/07/23 职场文书
医学专业大学生职业生涯规划书
2014/10/25 职场文书
公司仓管员岗位职责
2015/04/01 职场文书
班主任班级管理心得体会
2016/01/07 职场文书
MySQL 使用事件(Events)完成计划任务
2021/05/24 MySQL
详解php中流行的rpc框架
2021/05/29 PHP