Javascript 调整浏览器大小时刷新+如何减少痛苦

Question

我有一个我正在处理的模板，其中有几个 div 由 javascript 动态调整大小（它们复制其他 divs):

$('#postThumbnailGhost').height($('.wp-post-image').height());
$('#post').css('min-height', $('.wp-post-image').height());

它工作得很好，直到我尝试调整浏览器的大小。脚本不再调用。

那么，如果 window 调整了大小，为什么不重新加载整个页面？

好的，那么：

$(window).resize(function(){location.reload();});

但是，当页面重新加载时，它闪烁很多，因为一些内容是动态生成的。

比如我前面提到的两个div。我还有一个嵌入式推特时间轴，每次加载页面时它都会自行刷新。

所以问题是我怎样才能让重新加载变得无痛（不眨眼）。

顺便说一下，我的 Jquery 调用在页脚中，我所有的脚本都一样。

/!\ 有时当我在我的网站上重新加载页面时，似乎 Javascript 根本不起作用，或者调用得太晚，导致模板被弄乱（可能是因为它在页脚中？)

++ JSFiddle 没有动态 div 的调整大小问题。您可以毫无问题地调整渲染部分的大小。 JSFiddle of the project, without window load script

++ Link of the project live

塞恩

Answer 1

调整window大小时不需要重新加载，只需resize:

function updateHeights() {
    $('#postThumbnailGhost').height($('.wp-post-image').height());
    $('#post').css('min-height', $('.wp-post-image').height());
}
updateHeights();
$(window).on("resize", updateHeights);

Answer 2

为什么要重新加载页面，为什么不在调整大小时再次调用相同的代码？

$(window).resize(function(){
    $('#postThumbnailGhost').height($('.wp-post-image').height());
    $('#post').css('min-height', $('.wp-post-image').height());
});

不过，将该代码放入一个函数中可能会很聪明，这样它就不会重复，只要需要就调用该函数。

Javascript 调整浏览器大小时刷新+如何减少痛苦

Javascript refresh when browser is resized + How to make it be less painfull

css

jquery

dynamic

reload

page-refresh