等待 jQuery 在 Wordpress 中加载答案

【问题标题】：Wait for jQuery to load in Wordpress等待 jQuery 在 Wordpress 中加载
【发布时间】：2019-11-12 09:07:08
【问题描述】：

Wordpress 自动加载 jQuery。我想使用它，但我得到：

jQuery 没有定义

这是因为各种插件弄乱了脚本的顺序。所以不能保证我的脚本会在加载 jQuery 之后加载。因此，如果它之前加载，我会收到该错误。

我可以将我的脚本包装在等待 jQuery 加载然后执行我的脚本的东西中吗？

注意事项

我不想手动加载 jQuery，因为那样我会破坏各种插件......我必须让 Wordpress 像往常一样加载它
我不是 PHP 人，所以我不想破解主题...我只想将我的脚本包装在跨浏览器的“jquery 等待脚本”中

【问题讨论】：

另见wait for jQuery loaded
@Adder 谢谢。但这谈到了使用 defer，我无法像 Wordpress 控制 jquery 一样控制它，以及由于 jquery 尚未加载而无关紧要的文档准备就绪。

标签： javascript jquery wordpress

【解决方案1】：

window.deferAfterjQueryLoaded 中的所有函数都将在定义jQuery 之后运行，因此如果您将所有初始化推送到window.deferAfterjQueryLoaded 中，您可以确定它们将在jQuery 之后运行

<script>
    if (!window.deferAfterjQueryLoaded) {
        window.deferAfterjQueryLoaded = [];

        //delete Object.defineProperty; //add this if you want to check the support
        if (typeof (Object.defineProperty) === "function") {
            Object.defineProperty(window, "jQuery", {
                set: function (value) {
                    window.setTimeout(function () {
                        $.each(window.deferAfterjQueryLoaded, function (index, fn) {
                            fn();
                        });
                    }, 0);
                    Object.defineProperty(window, "jQuery", {value: value});
                },

                configurable: true
            });
        } else {
            nIntervId = window.setInterval(function () {
                if (typeof (jQuery) !== "undefined") {
                    $.each(window.deferAfterjQueryLoaded, function (index, fn) {
                        fn();
                    });
                    clearInterval(nIntervId);
                }
            }, 10);
        }
    }
    window.deferAfterjQueryLoaded.push(function () {
        (function ($) {
            console.log("After jquery is loaded");
        })(jQuery);
    });

</script>
<script>
    window.deferAfterjQueryLoaded.push(function () {
        (function ($) {
            console.log("After jquery is do something else");
        })(jQuery);
    });
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

您可以阅读更多关于Object.defineProperty，您可以查看跨浏览器支持here

【讨论】：

谢谢 - 看起来很有趣，我正在测试它...你知道这是否支持跨浏览器吗？
我添加了一个链接供您查看，我尝试对 sn-p 进行一些更改，以便您覆盖不支持 Object.defineProperty 的浏览器
我认为不需要你在页面末尾有一个 polyfill developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…
我已经更改了 sn-p，jquery 3.3.1 正在使用 Object.defineProperty 所以我已更改为 1.11.1

【解决方案2】：

恕我直言，当触发“加载”时，您可以使用 jQuery：

window.addEventListener('load', (event) => {
  // your code
});

【讨论】：

我正在考虑这样做，因为它非常简单/容易......但是你知道它是否有良好的跨浏览器支持吗？根据我的经验，当事情如此简单时，是因为旧的讨厌的浏览器不支持它:)
是的，它有很好的浏览器支持，请看：developer.mozilla.org/en-US/docs/Web/API/Window/load_event你也可以使用window.onload = function() { /* your code */ };

【解决方案3】：

也许这会有所帮助：

$j = jQuery.noConflict();

然后使用$j

汤姆

【讨论】：

问题是 jQuery 还没有加载——这不是一个无冲突的问题。
好的。我有时会遇到此错误（未定义）并像这样解决了它。但通常我不会移动 jQuery。
是的，在这种情况下，这是因为 Wordpress 在无冲突模式下运行 jquery，所以您必须使用 jQuery 而不是 $。但这假设 jQuery 已经加载，所以它解决了一个相关但不同的问题。