jQuery && 谷歌浏览器答案

【问题标题】：jQuery && Google ChromejQuery && 谷歌浏览器
【发布时间】：2010-06-18 14:11:51
【问题描述】：

此脚本在所有浏览器中都能完美运行，除了 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 无法识别更改的图像属性。

当img的width发生变化时，height也会发生变化。甚至不在 Chrome 中..

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

unhover_height 给出0。

此脚本的完整代码（包括 html）-http://jsfiddle.net/BsqTe/

请帮忙解决这个问题。

谢谢。

【问题讨论】：

你可能想看看这个问题：stackoverflow.com/questions/3035635/…
OT，但所有这些 $(this) 让我畏缩。您正在调用一个构造对象的函数，使用它，然后将其丢弃；然后调用构造对象的函数，然后将其丢弃；然后调用一个函数......你明白了。在顶部尝试var $this = $(this)，然后改用$this。
@T.J.克劳德 - 这是个好主意，谢谢。

标签： jquery google-chrome

【解决方案1】：

如果您正在处理来自 jQuery ready 函数中的图像，您需要记住图像可能尚未加载。 jQuery ready 函数的目的是在 DOM 准备好后立即触发，即使图像仍在加载。如果您想在所有图像加载完成后执行某些操作，请改用window 的load 事件：

$(window).load(yourFunctionHere);

【讨论】：

【解决方案2】：

您可能想注意到图像也具有加载功能。此外，一些 IE 版本有一个特点，如果图像已经加载，它不会在事后触发任何附加到事件的 onload 函数。所以这个小sn-p应该始终确保在图像加载后调用某些函数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(); }

【讨论】：