TA貢獻(xiàn)1820條經(jīng)驗(yàn) 獲得超9個(gè)贊
拼寫
正如其他人提到的那樣，由于多種原因，拼寫效果很好，但是，效果卻不盡如人意。
從好的方面來(lái)說(shuō)，您最終只對(duì)圖像發(fā)出一個(gè)HTTP請(qǐng)求。YMMV雖然。
不利的一面是，您將所有內(nèi)容加載到一個(gè)HTTP請(qǐng)求中。由于當(dāng)前大多數(shù)瀏覽器都限于2個(gè)并發(fā)連接，因此圖像請(qǐng)求可以阻止其他請(qǐng)求。因此，YMMV和菜單背景之類的內(nèi)容可能無(wú)法渲染一會(huì)。
多張圖像共享相同的調(diào)色板，因此可以節(jié)省一些費(fèi)用，但情況并非總是如此，甚至可以忽略不計(jì)。
由于圖像之間共享的數(shù)據(jù)更多，因此壓縮得到了改善。
但是，處理不規(guī)則形狀非常棘手。將所有新圖像合并到新圖像中是另一種煩惱。
使用<img>標(biāo)簽的低千斤頂方法
如果您正在尋找最確定的解決方案，則應(yīng)采用我仍然偏愛的低千斤頂方法。在文檔的末尾創(chuàng)建的<img>鏈接到的圖像和設(shè)置width，并height以1x1像素，另外把它們放在一個(gè)隱藏的股利。如果它們?cè)陧?yè)面末尾，則會(huì)在其他內(nèi)容之后加載它們。
TA貢獻(xiàn)1796條經(jīng)驗(yàn) 獲得超10個(gè)贊
這里介紹的方法均不適合我使用，因此，這是經(jīng)過(guò)測(cè)試并與Chrome 25和Firefox 18一起使用的方法。使用jQuery和此插件來(lái)解決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");
});
請(qǐng)注意，如果禁用了緩存，您將得到不同的結(jié)果，當(dāng)開發(fā)人員工具打開時(shí)，默認(rèn)情況下在Chrome上是這樣，因此請(qǐng)記住這一點(diǎn)。
舉報(bào)