判断图片是否加载完成

有时需要获取图片的尺寸,这需要在图片加载完成以后才可以。有三种方式实现,下面一一介绍。

1、load事件

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>img - load event</title>
</head>
<body>
<img id="img1" src="http://pic1.win4000.com/wallpaper/f/51c3bb99a21ea.jpg">
<p id="p1">loading...</p>
<script type="text/javascript">
    img1.onload = function() {
        p1.innerHTML = 'loaded'
    }
</script>
</body>
</html>

测试,所有浏览器都显示出了“loaded”,说明所有浏览器都支持img的load事件。

二、readystatechange事件

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

原文发布于微信公众号 - 交互设计前端开发与后端程序设计(interaction_Designer)

原文发表时间:2015-12-14

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Danny的专栏

HTML初识

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/huyuyang6688/article/...

14130
来自专栏用户2442861的专栏

PyCharm常用快捷键

Ctrl + NumPad+/- 展开或者收缩代码块 Ctrl + Shift + NumPad+ 展开所有的代码块 Ctrl + Shift + NumPa...

31210
来自专栏黑泽君的专栏

NetBeans的(默认)快捷键

15620
来自专栏cnblogs

DOM事件第二弹(UIEvent事件)

此文章主要总结UIEvent相关的事件,如有不对的地方,欢迎指正。 一、uitls.js(绑定事件公共类) var fixs = { 'focusin'...

20290
来自专栏十月梦想

Vue入门详解之Vue实现hello world!

前几天搞了从入门到放弃系列的Vue文章,发现每篇文章有点乱,可能思路不太清晰,用了几天发现Vue,恩,真香!继续来搞Vue,接下来详细介绍Vue入门,本篇来看一...

24630
来自专栏vue学习

27、有赞Vant组件库的引入及轮播图片预览的实现②

这个vant组件与其它组件的引入方式不同,不需要在main.js中引入,直接在页面中引入即可:

30520
来自专栏无原型不设计

[桌面版] 在 Mockplus 2.1 (预览版)中使用切换面板

1、添加切换面板 2、双击编辑切换面板当前页。 3、退出当前页编辑,点击组件上工具条上的加号,增加一个内容页并编辑内容 4、添加响应用户事件的组件。...

29750
来自专栏前端小叙

页面加载中jquery逐渐消失效果实现

为了获得更好的用户体验,现在大多数网页都会在页面中加一个加载中效果,这里实现一个加载中逐渐消失的效果,以至于看上去不那么生硬。 html: <div id="l...

48190
来自专栏技术博文

实用:Google Chrome 键盘快捷键大全

窗口和标签页快捷方式 Ctrl+N 打开新窗口 按住 Ctrl‎ 键,然后点击链接 在新标签页中打开链接 按住 Shift 键,然后点击链接 在新...

31980
来自专栏九彩拼盘的叨叨叨

学习前端第6周第4天

7520

扫码关注云+社区

领取腾讯云代金券