css背景圖像預加載器

我有麻煩製作工作預加載器爲CSS背景圖像。這裏是情況：我有幾個隱藏的元素，每個都有一個CSS背景圖像。css背景圖像預加載器

當用戶點擊一個「開始」按鈕，然後我使用jquery顯示元素（一個接一個：如一個顯示，另一個隱藏）。但是，只有在加載完所有圖像後才能使用「開始」按鈕。

我使用這個預載：

function preloadimages(arr) { 
    var newimages=[], loadedimages=0 
    var postaction=function(){} 
    var arr=(typeof arr!="object")? [arr] : arr 

    function imageloadpost() { 
     loadedimages++ 
     if (loadedimages == arr.length) { 
      postaction(newimages) //call postaction and pass in newimages array as parameter 
     } 
    } 

    for (var i=0; i<arr.length; i++) { 
     newimages[i] = new Image() 
     newimages[i].src = arr[i] 
     newimages[i].onload = function() { 
      imageloadpost() 
     } 

     newimages[i].onerror = function() { 
      imageloadpost() 
     } 
    } 

    return { //return blank object with done() method 
     done:function(f) { 
      postaction = f || postaction //remember user defined callback functions to be called when images load 
     } 
    } 
} 

preloadimages('img01','img02','img03') 
    .done(function(images) { 
     alert(images.length + " images loaded"); 
    });

然而，這僅加載1圖像。

我嘗試了一些其他的代碼，沒有結果。圖像預加載器應該在css背景圖像上工作嗎？或者它們僅用於標籤？

來源

2013-02-03 DavidTonarini

有一個非常好的純CSS解決方案用於預加載我認爲可以幫助您的背景圖片。其背後的概念是將背景圖像放置在頁面加載但未顯示時加載的僞元素上。這會導致瀏覽器加載圖像，以便稍後用另一個元素調用它們時，它們就準備好了。下面是一些示例代碼：

.main-element { 
    background-image: url(your_url_here); 
} 
.main-element:after { 
    display: none; 
    content: url(your_url_here), url(another_url_here), url(another_url_here), etc. 
} 
.hidden-element { 
    display: none; 
    background-image: url(your_url_here); 
} 
.main-element:hover { 
    .hidden-element: display: block; 
}

這裏有一個鏈接到一篇有關這一技術的詳細信息：http://www.thecssninja.com/css/even-better-image-preloading-with-css2

來源

2013-02-03 10:38:39 DMTintner

看起來不錯，但我無法得到它的工作。可能是因爲我仍然需要javascript/jquery根據用戶的用途來顯示元素？無論如何，圖像仍然加載後.show（）執行 – DavidTonarini

這完全沒問題，它應該仍然工作，並與您用來顯示元素的任何方法無關。無論如何，圖像實際上都被加載到完全獨立的元素（僞元素）上。我只是使用jquery show（）或jquery addClass（）爲要顯示的元素提供一個類，然後顯示它的樣式：block; – DMTintner

我得到它的工作！這是一個非常簡單的jQuery解決方案：

$(".hidden-element").show(); $(".hidden-element").hide();

這不是由用戶檢測，似乎仍然強制瀏覽器加載圖像我仍然無法加載完成後使用回調，但這項工作在ratice

來源

2013-02-03 13:42:12 DavidTonarini

這是很多不必要的處理，而不是處理此問題的非常有效的方法。你的目標應該是保持你的代碼乾爽，並且因爲你要再次調用show（）或toggle（）來與你想交互的元素，在這裏重複自己只是爲了加載圖像。 – DMTintner

css背景圖像預加載器

回答

相關問題