預加載陣列中的圖像（並等待他們已經下載）

所以我遇到了另一個問題。預加載陣列中的圖像（並等待他們已經下載）

當我開始重做我正在處理的網頁時，我遇到了一個想法 - 爲什麼不讓頁面預加載材料，並且正好這樣做時，顯示加載屏幕？那麼，我爲此做了一個功能，但事情是，它開始做它應該做的，直到它涉及到圖像預加載的open（）部分。它根本不起作用。這是因爲我給它的理由是我導致它在那裏停止的部分？有沒有更好的方法來做到這一點？

function mainPageLoad() { 
    var loadScreen = document.getElementById('pageload'); 
    loadScreen.innerHTML = "<p>Loading<span id='loadingWhat'>...</span></p><img src='images/loading.gif?v2'>"; 
    var loadspan = document.getElementById('loadingWhat'); 
    loadspan.innerHTML = " images"; 
    preloadImages(["images/logo.jpg"]) 
    //loadspan.innerHTML = " content"; 
    //preloadContent([""]); 
} 

function preloadImages() { 
    var images = new Array(); 
    var imagesToLoad = arguments.length; 
    document.writeln(imagesToLoad); 
    var imagesLoaded = 0; 
    document.writeln(imagesLoaded); 
    for (i = 0; i < arguments.length; i++) { 
     document.writeln("Loading images."); 
     images[i] = new XMLHttpRequest(); 
     document.writeln("Made object"); 
     images[i].open("GET", arguments[i], true); 
     document.writeln("Well, that worked."); 
     images[i].send(null); 
     document.writeln("Sent."); 
     images[i].onreadystatechange = function() { 
      document.writeln("Ready state change!"); 
      if (images[i].readystate == 4 && images[i].status == 200){ 
       imagesLoaded = imagesLoaded + 1; 
       window.alertln("We have loaded another image."); 
       window.alertln("Image" + String(imagesLoaded) + "out of" + String(imagesToLoad));   
      } 
     } 
    } 
} 

window.onload = init;

來源

2012-07-18 Ivan Kay

您不需要執行適當的AJAX請求來預加載圖像;你可以創建一個新的Image（），設置它的src，然後等待window.onLoad。 – 2012-07-18 18:59:30

如果您只是想等待所有資產被加載，請顯示您的加載消息，並聽取'window.onload'事件。加載所有內容時會觸發此事件，包括圖像。 – Yoshi 2012-07-18 19:00:12

@arxanas和Yoshi：我已經有一個window.onload在我的代碼的一開始 - 如果我在mainPageLoad函數的某個地方做了另一個window.onload，它會忽略它，還是會以它從未相當的裝載？ – 2012-07-18 19:20:41

這裏的預加載圖像，並把它調用的圖像時，完成在之前的相關提問/回答加載回調很多，很多簡單的方法：Image preloader javascript that supports events。

來源

2012-07-18 19:00:17 jfriend00

哦，所以也有一個圖像的onLoad！好吧，我會試試看它是如何工作的。 – 2012-07-18 19:02:12

這不會更適合作爲重複投票嗎？ – Yoshi 2012-07-18 19:02:14

@Yoshi - 有時很難決定是否將其稱爲dup。我經常對dups進行標記，但是我認爲這兩個問題看起來並不完全相同，儘管相同的答案幫助解決了這兩個問題 - 我認爲這是一個判斷。 – jfriend00 2012-07-18 19:06:32

預加載陣列中的圖像（並等待他們已經下載）

回答

相關問題