脚本不工作在Safari和Chrome的document.ready（FF好吧），但在document.resize

我有以下jQuery脚本来调整图像的大小，并给它一个左边距以水平居中。该脚本在FF中完美工作，但在Safari和Chrome中，我遇到了问题。脚本不工作在Safari和Chrome的document.ready（FF好吧），但在document.resize

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>之前。

任何援助将不胜感激！

来源

2011-04-18 circey

你总是可以尝试将它放在SetTimeout（1）中，看看是否有帮助:) – Brad 2011-04-18 04:56:00

只要有可能，就避免尝试这样的事情。 JS是事件驱动的，所以它应该加载在正确的触发器上，而不是假定需要1秒加载。 – wesbos 2011-04-18 05:02:40

*（无论如何; - ）* – circey 2011-04-18 05:07:32

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

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

// or 

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

来源

2011-04-18 04:59:28

完美 - window.load适用于所有浏览器！我仍然在学习很多关于jQuery的知识 - 我认为document.ready总是最好用！非常感谢:-) – circey 2011-04-18 05:06:46

jQuery的要点是适用于所有浏览器！无论如何，文档准备就是最好的选择......当然，直到你的代码依赖于加载的图像。 – 2011-04-18 10:51:34

如果它只是一个图像，您还可以绑定到图像加载事件。

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

来源

2011-04-18 05:01:21 wesbos

脚本不工作在Safari和Chrome的document.ready（FF好吧），但在document.resize

回答

相关问题