在做頁面的時候,經常碰到要在頁面加載完全之后再去展現。這時候我們會直接想到使用window.onload的方式,或者是采用Jquery的ready方法判斷,這在一定程度可以搞定。
window.onload方式
window.onload =function() { //your code }
Jquery的ready方法
//: 判斷網頁是否加載完成 document.onreadystatechange = function () { if(document.readyState=="complete") { document.getElementById('divprogressbar').style.display='none'; } }
;(function($,undefined){ $(function(){ //your code }); })(window.jQuery);
但是上面的方法只能判斷Dom的加載狀態,不能判斷圖片是否加載成功。如果碰到頁面需要圖片加載完成才能展現的情況,我們就無法搞定了。
現提供兩種方式判斷圖片是否加載完成。
使用onload的圖片加載事件檢測
這里是使用onload和onerror檢測判斷,但是有時候不能檢測到圖片是否加載完成,再使用過程中,我發現它只是判斷所有圖片開始加載時就觸發了,不過基本可以滿足需求。
使用complete的圖片屬性檢測
這里我們采用定時器不斷檢測圖片的complete屬性,這個比較完美,只有圖片確實加載完成時,才會變成真,所以比較可靠,建議采用。
參考出處：http://jingyan.baidu.com/article/63acb44a376f5961fcc17ef0.html
====================================================================
在網上有很多關於判斷圖片是否已經加載完畢的文章，但是有的瀏覽器並不適合，下面小編給大家分享一些有關JavaScript判斷圖片是否已經加載完畢方法匯總，具體內容如下所示：
一.onload事件
通過監聽圖片的onload事件，可以判斷圖片是否已經加載完成，兼容所有的瀏覽器（w3c推薦方法），代碼示例如下
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
<!DOCTYPE html>
<html lang=
"en"
>
<head>
<meta charset=
"UTF-8"
>
<title>Document</title>
</head>
<body>
<script>
// 方法一：圖片已經下載完
document.getElementById(
'img1'
).onload =
function
(e){
e.stopPropagation();
alert(1);
}
</script>
</body>
</html>
|
二.判斷img對象（DOM）的complete屬性
當img加載完成之后，complete對象屬性將變為true，代碼示例如下：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
<!DOCTYPE html>
<html lang=
"en"
>
<head>
<meta charset=
"UTF-8"
>
<title>Document</title>
</head>
<body>
<script>
// 方法二：img的complate屬性
var
timer = setInterval(
function
(){
if
(document.getElementById(
'img1'
).complete){
clearInterval(timer);
alert(1);
console.log(document.getElementById(
'img1'
).complete)
}
}, 10);
</script>
</body>
</html>
|
親測該方法同樣可兼容所有瀏覽器
三.onreadystatechange事件
在ie下，img對象與xhr對象一樣具有onreadystatechange事件，可以通郭建廷該事件判斷圖片是否加載完成，代碼示例如下：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
<!DOCTYPE html>
<html lang=
"en"
>
<head>
<meta charset=
"UTF-8"
>
<title>Document</title>
</head>
<body>
<script>
document.getElementById(
'img1'
).onreadystatechange =
function
() {
if
(document.getElementById(
'img1'
).readyState==
"complete"
||document.getElementById(
'img1'
).readyState==
"loaded"
){
alert(1);
}
}
</script>
</body>
</html>
|
該方法僅在ie下可用
參考出處：http://www.jb51.net/article/79233.htm