Question

我有一个我正在研究的模板，其中有一些由javascript动态调整大小的div（它们复制其他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

Séane

Answer 1

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

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 +如何减少浏览器的痛苦程度

2 个答案: