Ie6: Background-image Load Event

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-i

Solution 1:

This 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.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]: is just a Boolean indicator for a dialog box, that is not used by all the possible command. But is used for example to save files / create link / etc... Eg: http://man.ddvip.com/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.com/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)

Solution 2:

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.com/attr/

3) Also:

<scripttype="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

Solution 3:

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

Solution 4:

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