Loading消息

-6

尋找一個js腳本，它將顯示一些消息（類似於「正在加載，請稍候」）直到頁面加載所有圖像。Loading消息

重要 - 它不得使用任何js框架（jquery，mootools等），必須是普通的js腳本。

加載頁面時消息必須消失。

來源

2009-06-23 Mike

未來，邁克，不要以「我需要......」開始提問這是一個學習的地方，不要獲得免費贈品;） – Sampson 2009-06-23 10:35:24

我的英語不好，也許你不明白我。我希望「需要」的意思不是「想要得到自由」，但它似乎是不同的意思:) – Mike 2009-06-23 10:41:40

呀一個老派的問題！這可以追溯到那些我們用來預先加載圖像的日子......

無論如何，這裏有一些代碼。魔術是document.images集合（Image對象）上的「完整」屬性。

// setup a timer, adjust the 200 to some other milliseconds if desired 
var _timer = setInterval("imgloaded()",200); 

function imgloaded() { 
    // assume they're all loaded 
    var loaded = true; 

    // test all images for "complete" property 
    for(var i = 0, len = document.images.length; i < len; i++) { 
    if(!document.images[i].complete) { loaded = false; break; } 
    } 

    // if loaded is still true, change the HTML 
    if(loaded) { 
    document.getElementById("msg").innerHTML = "Done."; 

    // clear the timer 
    clearInterval(_timer); 
    } 
};

當然，這是假設你有一些DIV扔在什麼地方：

<div id="msg">Loading...</div>

來源

2009-06-23 07:54:30

如果我想爲頁面上的所有元素執行此操作而不僅僅是圖像，該怎麼辦？ – renegadeMind 2009-06-23 08:05:38

您應該對圖像執行異步ajax請求，並在完成後添加回調。
下面是一些代碼來說明吧：

var R = new XMLHttpRequest(); 
R.onreadystatechange = function() { 
    if (R.readyState == 4) { 
    // Do something with R.responseXML/Text ... 
    stopWaiting(); 
    } 
};

來源

2009-06-23 07:52:30

他不需要Ajax請求。無論如何，回調只會顯示該請求已完成，但不會加載該圖像。您需要觀察圖像onload事件。 – Pawka 2009-06-23 07:57:53

@Pawka：加載圖像時不會完成請求嗎？ – 2009-06-23 07:59:24

理論上你可以有運行，如果所有圖像加載，檢查函數的每個圖像對象的onload事件。這樣你就不需要setTimeOut（）。然而，如果圖像沒有加載，這將會失敗，所以你也不得不考慮錯誤。

來源

2009-06-23 08:05:06 anddoutoi

只需在頁面中添加一個靜態的<div>，通知用戶頁面正在加載。然後添加window.onload處理程序並刪除該div。

順便說一句，這是什麼原因？用戶的瀏覽器中是否已經有頁面加載指示器？

來源

2009-06-23 08:07:28