首页 > 解决方案 > 等待 jQuery 在 Wordpress 中加载

问题描述

Wordpress 会自动加载 jQuery。我想使用它,但我得到:

jQuery 未定义

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

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

笔记

标签: javascriptjquerywordpress

解决方案


中的所有函数都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的内容,您可以在此处查看跨浏览器支持


推荐阅读