IE6: Background-Image Load Event

前端 未结 4 1184
独厮守ぢ
独厮守ぢ 2021-02-12 21:26

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 backgroun

相关标签:
4条回答
  • 2021-02-12 21:47

    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)

    0 讨论(0)
  • 2021-02-12 21:52

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

    0 讨论(0)
  • 2021-02-12 22:00

    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:

    <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

    0 讨论(0)
  • 2021-02-12 22:04

    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');
    
    0 讨论(0)
提交回复
热议问题