Question

我正在显示一堆缩略图并且延迟可能非常高（通过VPN）所以我将所有缩略图发送到一个文件（如精灵）并设置CSS背景图像和背景位置属性一个div来显示缩略图。我遇到的问题是使用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 hover problems, keeps loading background image

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');

IE6：背景图像加载事件

4 个答案: