脚本只能在页面重新加载(Script working only on page reload)

脚本只能在页面重新加载(Script working only on page reload)

我使用jQuery在水平视图网站上对齐图像，但该脚本仅在我重新加载页面时才起作用。

http://joliannelm.steveforest.com/edition/roux-de-service.html

该脚本之前被调用

这是脚本：

$(document).ready(function() { var width = 0; $('#page img').each(function() { width += $(this).outerWidth(true); }); $('#page').css('width', width + 50); });

一旦页面被重新加载，这是可以的，但如果你清除缓存，它会回来...

有人知道为什么？ 谢谢。

I'm using jQuery to align images on an horizontal view website, but the script only works when I reload the page.

http://joliannelm.steveforest.com/edition/roux-de-service.html

The script is called just before

This is the script :

$(document).ready(function() { var width = 0; $('#page img').each(function() { width += $(this).outerWidth(true); }); $('#page').css('width', width + 50); });

Once the page is reloaded it's OK, but if you clear the cache, it's back...

Someone knows why?? Thanks.

最满意答案

这可能是一个计时问题： ready事件是在DOM准备好时触发的 - 这可以在加载图像之前完成。 因为你没有给出图像的固定width属性，所以你需要先加载它们，然后才能说出它们的宽度。

这是load事件是最合适的触发器。

$(window).load(function() { ... your code here

不像ready ， load将等待所有相关文件 - 图像，样式表，JavaScript文件等。

This is probably a timing problem: The ready event is fired when the DOM is ready - this can be before the images are loaded. Because you're not giving the images fixed width attributes, you need them to be loaded before you can tell their width.

This is where the load event is the most appropriate trigger.

$(window).load(function() { ... your code here

unlike ready, load will wait for all associated files - images, style sheets, JavaScript files etc.