IE6：背景圖像加載事件

Question

我正在顯示一堆縮略圖，延遲可能非常高（通過VPN）所以我將所有縮略圖發送到一個文件（如精靈）並設置div的CSS背景圖像和背景位置屬性顯示縮略圖。 我遇到的問題是使用IE6並弄清楚圖像何時加載...我正在使用BackgroundImageCache hack：

document.execCommand("BackgroundImageCache",false,true);

要檢查圖像何時加載，我使用以下代碼：

$('<img>').attr('src', 'ThumbSpriteTest.png').load(function() {
    $('.Thumbnails').css('background-image', 'url(ThumbSpriteTest.png)');
});

這適用於我嘗試過的每個瀏覽器，除了IE6 ...即使緩存黑客它正在加載圖像，觸發事件，設置背景圖像屬性並再次下載圖像（我的.Thumbnail元素是空白的，而它重新下載）。

在我看來，緩存黑客只是改變了CSS引用的行為，而不是img標簽。 如何加載背景圖像而不下載兩次？ IE6有可能嗎？

編輯：使用： document.execCommand("BackgroundImageCache",true,true); 似乎工作（兩個參數都為'true'）。 我在找到有關BackgroundImageCache命令及其參數的任何文檔時遇到了問題（我發現了很多使用它來解決CSS問題的例子，但它們都使用false,true作為參數並且不解釋它們）。 對於在BackgroundImageCache命令及其參數上有良好信息/文檔的人來說，賞金仍然是好的！

（我不知道為什么我因為IE的缺點而浪費了這么多時間后發現一些有用的東西很興奮）

Answer 1

這肯定是文檔很少，因為它被認為是ie6的一個修補程序，並將保持這種方式，看到這已經在ie8中修復。 無論如何，這是挖出來的東西。

execCommand方法： http ： //msdn.microsoft.com/en-us/library/ms536419（ v = vs。85） .aspx

 bSuccess = object.execCommand(sCommand [, bUserInterface] [, vValue]);
 //sCommand is the name of command to execute
 //[bUse...] is to give permission to display a dialog window (if applicable)
 //[vValue] value to pass as parameter to the command

[bUserInterface]：只是對話框的布爾指示符，並非所有可能的命令都使用。 但是用於保存文件/創建鏈接等等...例如： http ： //man.ddvip.com/web/dhtml/constants/createlink.html

所以你可能想要在設置為false時檢查這個值是否有效，它應該在理論上工作......但是修補程序可能會因為有趣的原因而中斷。

關於此修補程序： http ： //support.microsoft.com/kb/823727

無論如何，此功能僅作為IE6的補丁出現。 所以dun假設它適用於所有ie6瀏覽器。 雖然引入它是為了防止多次加載+泄漏，而不是“緩存”你使用它的方式，它仍然按照顧名思義（希望如此）。 所以，對未打補丁的版本上的打嗝感到驚訝（自動更新應該解決這個問題）

有了這個警告，如果你有依賴它的功能，請抓住執行成功或失敗的布爾值。 而且我想用你所擁有的東西做到最好（要傷心地被迫支持ie6）

Answer 2

1） css屬性：

$('<img>').attr('src', 'ThumbSpriteTest.png').load(function() {
    $('.Thumbnails').css('background-image', 'url(ThumbSpriteTest.png)');
});

2）attr（'src'，' ThumbSpriteTest.png '） - 可能是個問題

某些屬性的值在瀏覽器之間報告不一致，甚至跨單個瀏覽器的版本報告。 .attr（）方法減少了這種不一致。

見http://api.jquery.com/attr/

3）另外：

<script type="text/javascript">
try {
 document.execCommand('BackgroundImageCache', false, true);
} catch(e) {}
</script>

或嘗試CSS方式

html { 
filter: expression(document.execCommand("BackgroundImageCache", false, true)); 
}

最后的例子在這里找到： Jquery IE6懸停問題，不斷加載背景圖像

Answer 3

如果你只使用上面的IE6代碼而問題只反映在IE6中，那么我猜你的問題是jquery ...檢查以下內容：

$('.Thumbnails').css('background-image', 'url(ThumbSpriteTest.png)');

你必須添加'url(img_src)' 。

Answer 4

你必須先插入DOM，然后附加到img.load事件，然后把src和所有應該在IE中工作。 問題是因為如果在onload處理程序之前設置了src，IE總是不會觸發onload事件。

$('<img style="display:none"/>').appendTo('body').load(function() {
    $('.Thumbnails').css('background-image', 'url(ThumbSpriteTest.png)');
}).attr('src', 'ThumbSpriteTest.png');