脚本不适用于 Safari 和 Chrome 中的 document.ready（FF 可以），但适用于 document.resize答案

【问题标题】：script not working on document.ready in Safari & Chrome (FF okay), but works on document.resize脚本不适用于 Safari 和 Chrome 中的 document.ready（FF 可以），但适用于 document.resize
【发布时间】：2011-04-18 04:51:40
【问题描述】：

我有以下 jquery 脚本来调整图像大小并给它一个左边距以使其水平居中。该脚本在 FF 中完美运行，但在 Safari 和 Chrome 中我有问题。

Safari 和 Chrome 问题：图像调整大小正常，但 leftMargin 似乎已设置之前图像调整大小导致图像向左推得太远。此问题仅发生在 document.ready 上。调整浏览器大小时，脚本运行良好。

function imageresize() {
    var h = $(window).height(),
        w = $(window).width(),
        newHeight = h * 0.5,
        newTopMargin = newHeight * 0.12;

        $('img.resize').css({'height' : newHeight + 'px', 'margin-top' : '-' + newTopMargin + 'px'});
    var leftMargin = (w - ($('img.resize').width()))/2;
        $('img.resize').css('margin-left', leftMargin + 'px');

}
$(document).ready(function() {
  imageresize();
});

$(window).resize(function() {
  imageresize();
});

脚本放在</body>之前。

任何帮助将不胜感激！

【问题讨论】：

您可以随时尝试将其放入 SetTimeout(1) 中，看看是否有帮助:)
尽可能避免尝试这样的时间。 JS 是事件驱动的，所以它应该在正确的触发器上加载，而不是假设加载需要 1 秒。

标签： jquery cross-browser

【解决方案1】：

文档就绪事件可以在图像完成加载之前触发。尝试绑定到窗口或图像的load event。

$(window).load(function() {
  imageresize();
});

// or

$('img').load(function() {
  imageresize();
});

【讨论】：

完美——window.load 适用于所有浏览器！我还在学习很多关于 jquery 的知识——我认为 document.ready 总是最好用的！非常感谢:-)
jQuery 的重点是可以在所有浏览器上工作！无论如何，准备好文档通常是最好的选择......当然，直到您的代码取决于正在加载的图像。

【解决方案2】：

如果只有一张图片，您还可以绑定到图片加载事件。

$(img).load(function() {
  imageresize();
});

【讨论】：