Question

我认为这个问题几乎是自我解释的......

我有一个脚本在窗口上绘制一些图形。目前，如果我调整窗口大小（如全屏显示），脚本将继续仅影响窗口的初始大小。应该重新运行，回应新的维度。

我已经尝试将其添加到我的脚本中。

$(window).resize(function() {

});

每当我调整大小时它都会运行...但只有当我调整大小时！没有更多的负载...因为它也应该。

我认为我走的是正确的道路，但我错过了什么？

Codepen here.

Answer 1

function drawStuff() {
   // move here the drawing code ............
};
// call it where the loading process is
drawStuff();

// call it on resize , too
$(window).resize(function() {
   drawStuff();
});

要求加载

如果您使用的是jQuery：

$(function(){
   drawStuff();
})

如果没有，试试这个。

window.onload = function(){
   drawStuff();
}

Answer 2

drawingFunction function(){
 // your drawling code;
}

$(window).resize(function() {
 console.log('window is resized');
 drawingFunction();
});

$( document ).ready(function() {
drawingFunction(); // for onload 
});

Answer 3

一切正常，但是当我最大化或恢复窗口时，调整大小事件会被触发2次。当我在Firefox中按F11全屏时，浏览器的工具栏会缓慢向上滑动，调整大小的事件最多可以激活40次。我的建议是使用延迟：

var timeout;

$(window).resize(function() {
clearTimeout(timeout);
timeout = setTimeout(onResizeOnly, 500);
});

function onResizeOnly()
{
//your code here
}

如何在窗口大小调整时重新运行脚本？

3 个答案: