使用javascript＆for循環加載頁面之前預加載圖像

Question

我目前正在創建網頁照片庫。我有一大堆圖片，我想用Javascript 預加載後頁面加載。而不是在我的陣列中有一個非常長的HTML鏈接列表，是否可以使用for循環？請參閱我的下面的代碼。我非常感謝任何關於我在for循環中做錯的有用見解！謝謝！！

<script type="text/javascript"> 
    function preloader() { 
     var images = new Array() 
     function preload() { 
      for (i = 0; i < preload.arguments.length; i++) { 
       images[i] = new Image() 
       images[i].src = preload.arguments[i] 
      } 
     } 
     preload(
      var i=1; 
      "http://example.com/images/gallery/elephants-" + for (i=1;i<=5;i++) {document.write(i);} + ".jpg", 
      "http://example.com/images/gallery/penguins-" + for (i=1;i<=2;i++) {document.write(i);} + ".png" 
     ) 
    } 

    function addLoadEvent(func) { 
     var oldonload = window.onload; 
     if (typeof window.onload != 'function') { 
      window.onload = func; 
     } else { 
      window.onload = function() { 
       if (oldonload) { 
        oldonload(); 
       } 
       func(); 
      } 
     } 
    } 
    addLoadEvent(preloader); 
</script> 

我有一個問題的部分是在preload()部分for循環。該preload()部分應輸出/做到這一點：

preload(
    "http://example.com/images/gallery/elephants-1.jpg", 
    "http://example.com/images/gallery/elephants-2.jpg", 
    "http://example.com/images/gallery/elephants-3.jpg", 
    "http://example.com/images/gallery/elephants-4.jpg", 
    "http://example.com/images/gallery/elephants-5.jpg", 
    "http://example.com/images/gallery/penguins-1.png", 
    "http://example.com/images/gallery/penguins-2.png" 
) 

Answer 1

不能連接字符串和循環在一起。你必須使用一個循環和push方法來構建一個字符串數組：

var i, urls = []; 
for(i = 1; i <= 5; i++) 
    urls.push('http://example.com/images/gallery/elephants-' + i + '.jpg'); 
for(i = 1; i <= 2; i++) 
    urls.push('http://example.com/images/gallery/penguins-' + i + '.jpg'); 

然後使用apply調用預載功能和數組中傳遞的參數：

preload.apply(null, urls); 

所以你的整個預加載功能變爲：

function preloader() { 
    var images = new Array() 
    function preload() { 
     for (i = 0; i < preload.arguments.length; i++) { 
      images[i] = new Image() 
      images[i].src = preload.arguments[i] 
     } 
    } 

    var i, urls = []; 
    for(i = 1; i <= 5; i++) 
     urls.push('http://example.com/images/gallery/elephants-' + i + '.jpg'); 
    for(i = 1; i <= 2; i++) 
     urls.push('http://example.com/images/gallery/penguins-' + i + '.jpg'); 

    preload.apply(null, urls); 
} 

Answer 2

您已經定義了一個預載功能是接受零個參數，而你試圖在多個ARG傳遞進入預加載功能。此外，您使用分號分隔參數而不是所需的逗號。

爲了達到這個目的，我建議修改預加載函數以獲取一個可以迭代的單個數組對象，而不管有多少參數傳遞給該函數。下面是一個示例函數定義：

function preload(arr) { 
    for(var i = 0; i < arr.length; i++) { 
     var img = document.createElement("img"); 
     img.setAttribute("style","display:none"); 
     img.setAttribute("src",arr[i]); 
     document.body.appendChild(img); 
    } 
} 

要使用的功能，你會通過在陣列中的網址爲使用JavaScript對象表示法來表示該陣列的預載功能。

preload( 
    [ 
     "/images/first.png", 
     "/images/second.png", 
     "/images/third.png" 
    ] 
); 

此數組包含3個字符串，並且每個3個字符串將被傳遞到一個單獨的，隱藏的圖像標籤的src屬性。

我唯一的聲明與我的具體例子是某些版本的IE瀏覽器可能會或可能不會緩存隱藏的圖像。無論何時您使用原始JavaScript，而不是像jQuery這樣的庫，您都需要在每個瀏覽器中進行全面測試，以確保該解決方案具有交叉兼容性。也許你可以簡單地修改你的函數來接受正確的參數，然後使用你現有的技術來預先載入圖像，假設你是一個經過驗證的測試解決方案，你知道在你打算支持的所有瀏覽器中都可以。