IE6:背景图像加载事件

Question

我正在显示一堆缩略图，延迟可能很高（通过VPN），所以我在一个文件中发送所有缩略图（如sprite），并设置div的CSS背景图像和背景位置属性以显示缩略图。我遇到的问题是IE6和弄清楚图像何时加载。。。我正在使用BackgroundImageCache破解：

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

要检查图像何时加载，我使用以下代码：

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

这适用于我尝试过的除IE6之外的所有浏览器……即使使用了缓存破解，它也会加载图像、启动事件、设置背景图像属性并再次下载图像（我的.Thumnail元素在重新下载时为空）。

在我看来，缓存破解只是改变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的补丁出现。因此，不要以为它适用于所有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中工作。问题是，如果src设置在onload处理程序之前，IE不会总是触发onload事件。

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