I am displaying a bunch of thumbnail images and the latency can be very high (over a VPN) so I send all the thumbnails in a single file (like a sprite) and set the CSS background-image and background-position properties of a div to show the thumbnails. The problem I'm having is with IE6 and figuring out when the image has loaded... I'm using the BackgroundImageCache hack:
document.execCommand("BackgroundImageCache",false,true);
To check when the image is loaded I use this code:
$('<img>').attr('src', 'ThumbSpriteTest.png').load(function() {
$('.Thumbnails').css('background-image', 'url(ThumbSpriteTest.png)');
});
This works in every browser I've tried except IE6... even with the cache hack it is loading the image, firing the event, setting the background-image property and downloading the image again (and my .Thumbnail elements are blank while it re-downloads).
It seems to me that the cache hack is only changing the behavior of the CSS references and not the img tag. How can I tell when the background image is loaded without downloading it twice? Is it possible in IE6?
EDIT: Using: document.execCommand("BackgroundImageCache",true,true); seems to work (with both parameters as 'true'). I'm having trouble finding any documentation on the BackgroundImageCache mand and it's parameters (I've found plenty of examples of using it to fix the CSS problem, but they all use false,true as parameters and don't explain them)... the bounty is still good for anyone with good information/documentation on the BackgroundImageCache mand and it's parameters!
(I'm not sure why I'm excited to find something that works after wasting so many hours due to IE's shorting)
I am displaying a bunch of thumbnail images and the latency can be very high (over a VPN) so I send all the thumbnails in a single file (like a sprite) and set the CSS background-image and background-position properties of a div to show the thumbnails. The problem I'm having is with IE6 and figuring out when the image has loaded... I'm using the BackgroundImageCache hack:
document.execCommand("BackgroundImageCache",false,true);
To check when the image is loaded I use this code:
$('<img>').attr('src', 'ThumbSpriteTest.png').load(function() {
$('.Thumbnails').css('background-image', 'url(ThumbSpriteTest.png)');
});
This works in every browser I've tried except IE6... even with the cache hack it is loading the image, firing the event, setting the background-image property and downloading the image again (and my .Thumbnail elements are blank while it re-downloads).
It seems to me that the cache hack is only changing the behavior of the CSS references and not the img tag. How can I tell when the background image is loaded without downloading it twice? Is it possible in IE6?
EDIT: Using: document.execCommand("BackgroundImageCache",true,true); seems to work (with both parameters as 'true'). I'm having trouble finding any documentation on the BackgroundImageCache mand and it's parameters (I've found plenty of examples of using it to fix the CSS problem, but they all use false,true as parameters and don't explain them)... the bounty is still good for anyone with good information/documentation on the BackgroundImageCache mand and it's parameters!
(I'm not sure why I'm excited to find something that works after wasting so many hours due to IE's shorting)
Share Improve this question edited Jun 14, 2011 at 15:13 toby asked Jun 8, 2011 at 20:53 tobytoby 9023 gold badges10 silver badges21 bronze badges 13- 1 Why do you want to load it twice (once as bg and once as src)? I would do it once with the element hidden out of view. One of my guesses on this behaviour would be a background vs image issue. But I can't be sure. Then again, we're talking about ghosts here :D – Christian Commented Jun 8, 2011 at 20:55
- 5 You deserve a +1 just for being condemned to work with IE6. – zneak Commented Jun 13, 2011 at 13:25
- 1 Given that you've offered a bounty, I guess IE6 support is important to you. But it's worth re-stating that IE6 is a very old piece of software: No matter how many hacks and how good you jquery skills are, there are a lot of things which IE6 simply can't do or gets wrong. I don't know if this is one of them, but it seems likely. All I can do is suggest dropping support for IE6. If you've got a client who insists on it, tell them up-front that it will double the development cost and reduce the functionality. If they still insist on it, you'll just have to live with some things not working. – Spudley Commented Jun 13, 2011 at 13:32
- 7 I give you 150 bounty to let IE6 in the trash :) – Mohammed Swillam Commented Jun 13, 2011 at 15:29
- 2 @TerenceJohnson There's a difference between supporting a browser and making it look good ;) Why bother making it look good. – Raynos Commented Jun 14, 2011 at 11:37
4 Answers
Reset to default 3 +100This is definitely poorly documented, as it is considered a hotfix for ie6, and will stay that way, seeing this is already fixed in ie8. Anyway, here is what is dug up bout it.
execCommand method: http://msdn.microsoft./en-us/library/ms536419(v=vs.85).aspx
bSuccess = object.execCommand(sCommand [, bUserInterface] [, vValue]);
//sCommand is the name of mand to execute
//[bUse...] is to give permission to display a dialog window (if applicable)
//[vValue] value to pass as parameter to the mand
[bUserInterface]: is just a Boolean indicator for a dialog box, that is not used by all the possible mand. But is used for example to save files / create link / etc... Eg: http://man.ddvip./web/dhtml/constants/createlink.html
So you may want to check if this value works when set to false, it should work in theory... But hotfixes can break for funny reasons.
About the hotfix: http://support.microsoft./kb/823727
Anyway, this feature only appear as a patch to IE6. So dun assume it will work for all ie6 browser. While it was introduced to prevent multiple loading + leakages, and not "caching" the way you are using it, it still does what the name suggests (hopefully). So dun be surprised it hiccups on the way on unpatched versions (auto update should fix this though)
With that warning, please catch the execution for the success or fail Boolean values, if you have features dependent on it. And I guess make the best with what you have (to be sad enough to be forced to support ie6)
1) css property:
$('<img>').attr('src', 'ThumbSpriteTest.png').load(function() {
$('.Thumbnails').css('background-image', 'url(ThumbSpriteTest.png)');
});
2) attr('src', 'ThumbSpriteTest.png') - may be a problem
The values of some attributes are reported inconsistently across browsers, and even across versions of a single browser. The .attr() method reduces such inconsistencies.
See http://api.jquery./attr/
3) Also:
<script type="text/javascript">
try {
document.execCommand('BackgroundImageCache', false, true);
} catch(e) {}
</script>
OR try CSS way
html {
filter: expression(document.execCommand("BackgroundImageCache", false, true));
}
last examples were found here: Jquery IE6 hover problems, keeps loading background image
If you are using your code above for IE6 only and problem only reflects in IE6, then I guess your issue is the jquery... check the following:
$('.Thumbnails').css('background-image', 'url(ThumbSpriteTest.png)');
You have to add the 'url(img_src)'.
you have to first insert into DOM, then attach to the img.load event, then put src and all should work in IE. The problem is because IE doesn't fire onload event always if src is set before the onload handler.
$('<img style="display:none"/>').appendTo('body').load(function() {
$('.Thumbnails').css('background-image', 'url(ThumbSpriteTest.png)');
}).attr('src', 'ThumbSpriteTest.png');