使用jQueryUI 1.12.1会阻止触发事件$（window）.on（'；load'；，f）

当我将jQuery1.12.4与jQueryUI 1.12.1一起使用时，合并到一个JS文件中，该文件被异步加载到HTML中，不可能定义事件

$（窗口）

特别是，当页面内容加载速度快于启动jQuery脚本（即缓存）时，会触发document ready事件，但会跳过
$（窗口）。on（'load'）
。仅当页面必须加载一些新的非缓存内容（即大照片）时，文档就绪事件完成，然后还触发了事件
$（窗口）。在（'load'，f）
，我可以在控制台中看到

另一个奇怪的行为是，当我只使用jQuery 1.12.4框架（没有UI）时，定义
$（窗口）没有问题

我用简单的脚本做了一些测试。我希望所有带有“Loaded statement”的日志都会显示在documentReady日志之后，但它们是以“随机”顺序显示的。只有一种解决方案是正常加载Javascript（非异步），但Google不喜欢这种方法

有人能帮忙吗

var loaded = false;
window.addEventListener('load', function (){
    loaded = true;
});

$(window).on('load', function (){
    console.log('Content loaded by jQuery A');
});

$(function(){

    if ( loaded === true ) {
        console.log('Content loaded by ROOT');
    } else {
        $(window).on('load', function (){
            console.log('Content loaded by jQuery B');
        });
    }   

    console.log('jQuery Ready Event'); 
});

$(window).on('load', function (){
    console.log('Content loaded by jQuery A2');
});

$(function(){

    if ( loaded === true ) {
        console.log('Content loaded by ROOT 2');
    } else {
        $(window).on('load', function (){
            console.log('Content loaded by jQuery B2');
        });
    }

    console.log('jQuery Ready Event 2'); 
});

这是我的控制台中的事件顺序：

Content loaded by jQuery A
Content loaded by jQuery A2
Content loaded by ROOT
jQuery Ready Event
Content loaded by ROOT 2
jQuery Ready Event 2

删除jQueryUI或将异步切换为同步加载javascript后：

jQuery Ready Event
jQuery Ready Event 2
Content loaded by jQuery A
Content loaded by jQuery A2
Content loaded by jQuery B
Content loaded by jQuery B2

窗口上的
load
事件只触发一次。如果您在该事件已触发后尝试侦听该事件，您将永远不会收到它

侦听此事件的唯一可靠方法是在直接加载、非异步、非延迟
script
标记中执行。其他任何事情都有错过活动的风险，因为你太晚了

至于jQueryUI为什么会影响这种行为，可能有很多原因。但底线是，在任何其他类型的异步事件中侦听
load
事件都是不可靠的

下面是一个简单的例子，我尝试在
load
监听器中使用
addEventListener
和jQuery来侦听
load
事件。为了清楚起见，我将JavaScript代码放在显式的
标记中，而不是代码片段的常规JavaScript部分：



addEventListener（'load'，function（）{
log（'LoadEventwithAddEventListener'）；
addEventListener（'load'，function（）{
log（'load event with NESTED addEventListener'）；
});
});
$（窗口）.on（'load'，function（））{
log（'loadeventwithjquery'）；
$（窗口）.on（'load'，function（））{
log（'load event with NESTED jQuery'）；
});
});
对象上的
加载
事件只触发一次。如果您在该事件已触发后尝试侦听该事件，您将永远不会收到它

侦听此事件的唯一可靠方法是在直接加载、非异步、非延迟
script
标记中执行。其他任何事情都有错过活动的风险，因为你太晚了

至于jQueryUI为什么会影响这种行为，可能有很多原因。但底线是，在任何其他类型的异步事件中侦听
load
事件都是不可靠的

下面是一个简单的例子，我尝试在
load
监听器中使用
addEventListener
和jQuery来侦听
load
事件。为了清楚起见，我将JavaScript代码放在显式的
标记中，而不是代码片段的常规JavaScript部分：



addEventListener（'load'，function（）{
log（'LoadEventwithAddEventListener'）；
addEventListener（'load'，function（）{
log（'load event with NESTED addEventListener'）；
});
});
$（窗口）.on（'load'，function（））{
log（'loadeventwithjquery'）；
$（窗口）.on（'load'，function（））{
log（'load event with NESTED jQuery'）；
});
});
感谢您的快速回复。一切对我来说都很清楚，除了一件事——我不知道我不应该在jQuery文档就绪函数$（function（）{…}）中定义jQuery on（'load'）侦听器

我有一个更复杂的项目，我将多个脚本合并到一个文件中（使用任务运行程序Grunt、clear javascript和基于jQuery&jQuery UI的脚本进行处理），该文件由加载到HTML中，所以脚本在加载后运行，不必等待从其他文件加载脚本。我基于jQuery编写了一些具有以下结构的类：

var InDropdown = function (options) {

    var vars = {};

    var root = this;

    this.construct = function(options){

        vars = $.extend({            
            param: 'value',
        }, options);

        $(window).on('load.dropdown', function(){
            // run methods for checking CSS properties (f.e. display block/none), which can I read only if whole content is loaded
        });

        $(window).on('resize.dropdown', function(){
            // run methods for customize behaviour by actual window size
        });

    };

};

// initialization when jQuery Document Ready into global variable
var inDropdown = {};

$(function(){
    inDropdown = new InDropdown();
});

当只有jQuery框架合并到JS文件中时，它就可以工作了。但当我添加jQueryUI时，构造函数中的on（'load'）永远不会启动（在文档就绪事件之前也不会启动）

您认为这是在“jQuery文档准备就绪”和“jQuery打开（'load'）”事件上同时触发方法的另一种解决方案吗？
感谢您的快速响应。一切对我来说都很清楚，除了一件事——我不知道我不应该在jQuery文档就绪函数$（function（）{…}）中定义jQuery on（'load'）侦听器

我有一个更复杂的项目，我将多个脚本合并到一个文件中（使用任务运行程序Grunt、clear javascript和基于jQuery&jQuery UI的脚本进行处理），该文件由加载到HTML中，所以脚本在加载后运行，不必等待从其他文件加载脚本。我基于jQuery编写了一些具有以下结构的类：

var InDropdown = function (options) {

    var vars = {};

    var root = this;

    this.construct = function(options){

        vars = $.extend({            
            param: 'value',
        }, options);

        $(window).on('load.dropdown', function(){
            // run methods for checking CSS properties (f.e. display block/none), which can I read only if whole content is loaded
        });

        $(window).on('resize.dropdown', function(){
            // run methods for customize behaviour by actual window size
        });

    };

};

// initialization when jQuery Document Ready into global variable
var inDropdown = {};

$(function(){
    inDropdown = new InDropdown();
});

当只有jQuery框架合并到JS文件中时，它就可以工作了。但当我添加jQueryUI时，构造函数中的on（'load'）永远不会启动（在文档就绪事件之前也不会启动）

您认为这是在“jquerydocumentready”和&“jqueryon.（'load'）”事件上同时触发方法的另一种解决方案吗