等待jQuery在Wordpress中加载

Question

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

未定义jQuery

这是因为各种插件扰乱了脚本的排序。因此，不能保证在加载jQuery之后加载我的脚本。所以如果它之前加载了，我就会得到那个错误。

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

备注

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

Answer 1

window.deferAfterjQueryLoaded中的所有函数都将在定义jQuery之后运行，因此，如果您在window.deferAfterjQueryLoaded中推送所有inizializations，则可以确保它们将在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的内容，可以查看跨浏览器支持这里。

Answer 2

当“load”被触发时，可以使用jQuery：

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

Answer 3

也许这会有帮助：

$j = jQuery.noConflict();

然后使用$j

汤姆