TA貢獻1820條經驗 獲得超9個贊
拼寫
正如其他人提到的那樣，由于多種原因，拼寫效果很好，但是，效果卻不盡如人意。
從好的方面來說，您最終只對圖像發出一個HTTP請求。YMMV雖然。
不利的一面是，您將所有內容加載到一個HTTP請求中。由于當前大多數瀏覽器都限于2個并發連接，因此圖像請求可以阻止其他請求。因此，YMMV和菜單背景之類的內容可能無法渲染一會。
多張圖像共享相同的調色板，因此可以節省一些費用，但情況并非總是如此，甚至可以忽略不計。
由于圖像之間共享的數據更多，因此壓縮得到了改善。
但是，處理不規則形狀非常棘手。將所有新圖像合并到新圖像中是另一種煩惱。
使用<img>標簽的低千斤頂方法
如果您正在尋找最確定的解決方案，則應采用我仍然偏愛的低千斤頂方法。在文檔的末尾創建的<img>鏈接到的圖像和設置width，并height以1x1像素，另外把它們放在一個隱藏的股利。如果它們在頁面末尾，則會在其他內容之后加載它們。
TA貢獻1796條經驗 獲得超10個贊
這里介紹的方法均不適合我使用，因此，這是經過測試并與Chrome 25和Firefox 18一起使用的方法。使用jQuery和此插件來解決load事件怪癖：
function preload(sources, callback) {
if(sources.length) {
var preloaderDiv = $('<div style="display: none;"></div>').prependTo(document.body);
$.each(sources, function(i,source) {
$("<img/>").attr("src", source).appendTo(preloaderDiv);
if(i == (sources.length-1)) {
$(preloaderDiv).imagesLoaded(function() {
$(this).remove();
if(callback) callback();
});
}
});
} else {
if(callback) callback();
}
}
用法：
preload(['/img/a.png', '/img/b.png', '/img/c.png'], function() {
console.log("done");
});
請注意，如果禁用了緩存，您將得到不同的結果，當開發人員工具打開時，默認情況下在Chrome上是這樣，因此請記住這一點。
舉報