jQuery && Google Chrome

Question

This script works perfectly in all the browsers, except Google Chrome.

$(document).ready(function(){
    $(".banners-anim img").each(function(){
        var hover_width = $(this).width();
        var hover_height = $(this).height();
        var unhover_width = (hover_width - 30);
        $(this).width(unhover_width);
        var unhover_height = $(this).height();
        $(this).closest("li").height(unhover_height);
        var offset = "-" + ((hover_height - unhover_height)/2) + "px";
        $(this).closest("span").css({'position':'absolute', 'left':'0', 'top':'25px', 'width':'100%'});
        $(this).hover(function(){
            $(this).animate({width: hover_width, marginTop: offset}, "fast")
        },function(){
            $(this).animate({width: unhover_width, marginTop: 0}, "fast")
        });
    });
});

Chrome doesn't recognize changed image attributes.

When width of the img changes, height also changes. Even not in Chrome..

$(this).width(unhover_width);
var unhover_height = $(this).height();

unhover_height gives 0.

Full code of this script (html included) - http://jsfiddle.net/BsqTe/

Please help to fix this.

Thanks.

Answer 1

If you're doing things with images from within the jQuery ready function, you need to remember that the images may not be loaded yet. The purpose of the jQuery ready function is to fire as soon as the DOM is ready, even if images are still loading. If you want to do something when all images have finished loading, use window's load event instead:

$(window).load(yourFunctionHere);

Answer 2

You might want to notice that images too have onload functions. Furthermore, some IE versions have a peculiarity where if the image is already loaded, it will not fire any onload functions attached to the event after the fact. So this little snippet should always insure that some function DoResize is called after the image has loaded

var DoResize = function() { ... }
var img = $(".find .your img");
img.bind('load', DoResize);
img.bind('error', DoResize); // in case picture fails to load, still resize
if (img.get(0).complete) { DoResize(); }