Question

我有一个由100行左右组成的jQuery脚本。打开浏览器时，它具有特定的宽度和高度，使用这些值，脚本可以计算各种HTML元素的位置。

问题：

浏览器计算位置值后，如果浏览器调整大小，元素的位置会混乱，因为渲染基于浏览器的宽度和高度，然后再调整大小。

我已将所有代码放在resize()函数中但另一个问题，resize()中的代码只会在浏览器调整大小时执行，而不是在浏览器首次推出。

有什么方法可以绑定像 -

这样的事件

if( $(document).ready() OR $(window).resize() ) {
. . .
}

Answer 1

您必须使用所有代码定义一个函数，然后在各种事件中调用它：

function stuff() {
  // all stuff;
}

$(document).ready(stuff);
$(window).resize(stuff);

Answer 2

也许这是迟到的方式，但要看模块模式是个好点。所以定义一个函数并从你喜欢的地方调用它。

var WRAP = (function () {

    var myFunction = function (text) {
        console.log(text);
    };

    var myOtherFunction = function() {
        console.log('does nothing');
    };

    return {
        callMyFunction: myFunction,
        myOtherFunction: myOtherFunction
    };

})();

WRAP.callMyFunction('Loaded');
WRAP.myOtherFunction();

$(window).resize(function(){
    WRAP.callMyFunction('Resized');
});

Fiddle http://jsfiddle.net/7cty2ytq/并且阅读得很好：http://toddmotto.com/mastering-the-module-pattern/

Answer 3

首先绑定resize事件，然后在document.ready（）上触发它。看看我的代码

$(window).resize(function() {
    alert('Window is resized');
});
$(document).ready(function() {
    $(window).resize();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

在jQuery中使用.resize（）时避免代码重复

3 个答案: