判断图片是否加载完成
时间：2014-12-26 类别：Web前端 浏览量：1383
判断图片是否加载完成
判断图片是否加载完成一、load事件
通过向img标签添加onload属性，并填入相应的函数来执行后续的javascipt代码。如下代码例子中img元素默认是不显示的，通过onload判断加载完成后再将图片显示出来。
<img class="pic1" onload="get(this)" src="..." style='display:none' />
<script type="text/javascript">
function get(ts){
ts.style.display = 'block'; //显示图片
}
</script>
二、jquery方法
为每个class为pic1的图片元素绑定事件，通过jquery的load方法，将元素渐现出来。
<script type="text/javascript">
$(function(){
$('.pic1').each(function() {
$(this).load(function(){
$(this).fadeIn();
});
});
})
</script>
三、img的complete属性
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>img - complete attribute</title>
</head>
<body>
<img id="img1" src="">
<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则表明图片已经加载完毕，停止轮询。该属性所有浏览器都支持。
标签：图片加载
热门推荐
- 宝塔面板如何搭建内网网站（宝塔面板搭建云服务器优化教程）
- docker容器无法启动（Docker 无法停止或删除容器服务问题的解决方案）
- 脚本实现checkbox的全选和反选
- vscode如何配置python环境（VSCode Python开发环境配置的详细步骤）
- mysql高级概念（MySQL 自定义变量的概念及特点）
- docker自动入门教程（Docker Machine深入详解）
- php实例说明（PHP中Static静态关键字功能与用法实例分析）
- 如何获取存储过程返回值
- 如何在cmd里开启mysql（Windows下通过cmd进入DOS窗口访问MySQL数据库）
- php启用curl（php使用curl伪造浏览器访问操作示例）