jquery - 脚本无法在 Safari 和 Chrome 中的 document.ready 上运行(FF 可以)，但可以在 document.resize 上运行

Question

我有以下 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> 之前.

任何帮助将不胜感激!

Answer 1

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

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

// or

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