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

【问题标题】：Javascript refresh when browser is resized + How to make it be less painfull调整浏览器大小时Javascript刷新+如何减轻痛苦
【发布时间】：2016-02-12 10:00:30
【问题描述】：

我有一个我正在处理的模板，其中我有一些 div 可以通过 javascript 动态调整大小（它们复制其他 div 的高度）：

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

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

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

好的，那么：

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

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

例如，我之前提到的两个 div。我还有一个嵌入的 twitter 时间线，每次加载页面时都会自行刷新。

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

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

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

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

++Link of the project live

塞恩

【问题讨论】：

标签： jquery css dynamic reload page-refresh

【解决方案1】：

调整窗口大小时无需重新加载，只需resize：

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

【讨论】：

【解决方案2】：

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

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

不过，将代码放入函数中可能是明智之举，这样就不会重复，只需在需要时调用该函数。

【讨论】：