判断图片是否加载完成的六种方式

爱被打了一巴掌 2022-01-07 14:13 933阅读 0赞

### 一、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则表明图片已经加载完毕，停止轮询。该属性所有浏览器都支持。

### onload方法 ###

通过向img标签添加onload属性，并填入相应的函数来执行后续的javascipt代码。如下代码例子中img元素默认是不显示的，通过onload判断加载完成后再将图片显示出来。

<img class="pic1" οnlοad="get(this)" src="..." style='display:none' />
    
    <script type="text/javascript">
    function get(ts){
    	ts.style.display = 'block';  //显示图片
    }</script>

优点：可以将javascript代码部分放置于页面的任何部分加载，并且可以用于多数任意图片上。使用比较简单，易理解。

缺点：必须在每个标签上都贴上onlaod属性，在某些无法直接操作HTML代码，或者需要代码精简的情况下不适用

### javascipt原生方法 ###

选取指定ID的图片，通过onload指定回调方法，在图片加载完成后弹出“图片加载已完成”字样提示。

<img id="pic1" src="..." />
    
    <script language="JavaScript">
        document.getElementById("pic1").onload = function () {
            alert("图片加载已完成");
        }
    </script>

优点：简单易用，不影响HTML代码。

缺点：只能指定一个元素，javascipt代码必须置于图片元素的下方

### jquery方法 ###

为每个class为pic1的图片元素绑定事件，通过jquery的load方法，将元素渐现出来。

注意，不要在$(document).ready()里绑定load事件。

优点：可以批量绑定元素事件，并且不影响HTML代码内容

缺点：需要jquery库的支持，代码需要放置到需要操作元素的下方。

转载于:https://www.cnblogs.com/zhusf/p/10607957.html