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 相关文章推荐
javascript下阻止表单重复提交、防刷新、防后退
Aug 17 Javascript
用Juery网页选项卡实现代码
Jun 13 Javascript
js 遍历对象的属性的代码
Dec 29 Javascript
jQuery中阻止冒泡事件的方法介绍
Apr 12 Javascript
Summernote实现图片上传功能的简单方法
Jul 11 Javascript
canvas实现流星雨的背景效果
Jan 13 Javascript
利用js判断手机是否安装某个app的多种方案
Feb 13 Javascript
@ResponseBody 和 @RequestBody 注解的区别
Mar 08 Javascript
JS鼠标滚动分页效果示例
Jul 05 Javascript
微信小程序实现自定义加载图标功能
Jul 19 Javascript
原生JS封装拖动验证滑块的实现代码示例
Jun 01 Javascript
Node.js 中判断一个文件是否存在
Aug 24 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
header()函数使用说明
2006/11/23 PHP
PHP 日常开发小技巧
2009/09/23 PHP
护卫神php套件 php版本升级方法(php5.5.24)
2015/05/10 PHP
PHP实现递归的三种方法
2020/07/04 PHP
PhpSpreadsheet设置单元格常用操作汇总
2020/11/13 PHP
了不起的node.js读书笔记之mongodb数据库交互
2014/12/22 Javascript
jQuery中toggleClass()方法用法实例
2015/01/05 Javascript
javaScript中封装的各种写法示例(推荐)
2017/07/03 Javascript
详解react-webpack2-热模块替换[HMR]
2017/08/03 Javascript
react.js使用webpack搭配环境的入门教程
2017/08/14 Javascript
jQuery中库的引用方法
2018/01/06 jQuery
浅析java线程中断的办法
2018/07/29 Javascript
解决vue单页面应用进入页面加载所有 js 的问题
2020/08/12 Javascript
js简单粗暴的发布订阅示例代码
2021/01/23 Javascript
python打包压缩、读取指定目录下的指定类型文件
2018/04/12 Python
Python基础之循环语句用法示例【for、while循环】
2019/03/23 Python
Python实现使用request模块下载图片demo示例
2019/05/24 Python
pandas进行时间数据的转换和计算时间差并提取年月日
2019/07/06 Python
python 进程的几种创建方式详解
2019/08/29 Python
阿里云ECS服务器部署django的方法
2019/08/29 Python
英国航空官网:British Airways
2016/09/11 全球购物
英国国家美术馆商店:National Gallery
2019/05/01 全球购物
英国领先的在线礼品店:Getting Personal
2019/09/24 全球购物
Set里的元素是不能重复的,那么用什么方法来区分重复与否呢? 是用==还是equals()? 它们有何区别?
2014/07/27 面试题
十佳美德少年事迹材料
2014/02/05 职场文书
汽车维修工岗位职责
2014/02/12 职场文书
经典婚礼主持词
2014/03/13 职场文书
合作协议书模板2014
2014/09/26 职场文书
2014年社区教育工作总结
2014/12/02 职场文书
作文批改评语
2014/12/25 职场文书
幼师小班个人总结
2015/02/12 职场文书
2015年学校心理健康教育工作总结
2015/05/11 职场文书
初中班长竞选稿
2015/11/20 职场文书
golang fmt格式“占位符”的实例用法详解
2021/07/04 Golang
使用python创建股票的时间序列可视化分析
2022/03/03 Python
使用ICOM IC-R9500接收机同时测评十台收音机中波接收性能
2022/05/10 无线电