jQuery && Google Chrome

Question

Этот скрипт отлично работает во всех браузерах, кроме 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 не распознает измененные атрибуты изображения.

Когда width из img изменяется, height также изменяется. Даже не в Chrome ..

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

unhover_height дает 0.

Полный код этого скрипта (включая html) - http://jsfiddle.net/BsqTe/

Пожалуйста, помогите исправить это.

Спасибо.

Answer 1

Если вы работаете с изображениями из функции jQuery ready, вам следует помнить, что изображения могут быть еще не загружены .Цель функции jQuery ready - запускать, как только DOM будет готов, даже если изображения все еще загружаются.Если вы хотите что-то сделать после завершения загрузки всех изображений, используйте событие window load:

$(window).load(yourFunctionHere);

Answer 2

Вы можете заметить, что изображения также имеют функции загрузки. Кроме того, в некоторых версиях IE есть особенность, при которой, если изображение уже загружено, оно не будет запускать какие-либо функции загрузки, присоединенные к событию после факта. Так что этот маленький фрагмент должен всегда гарантировать, что некоторая функция DoResize вызывается после загрузки изображения

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(); }