0

我遇到了 jQuery 的 document.ready 触发函数的问题。我不确定这是由于 jQuery 还是由于浏览器的行为，但会发生这种情况：当您尝试使用 .append() 方法动态加载脚本并为 document.ready() 设置处理程序时， document.ready() 事件将在加载外部脚本/css 文件之前触发。这不适用于同一域中的脚本/css 文件 - 如果它们位于同一域中，则 document.ready 触发器将等待它们加载。

这是显示错误的代码示例：

<html>
    <head>
        <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
    </head>
    <body>
    <script type="text/javascript">
        $(document).ready(function() {
            var html = '<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js" type="text/javascript"><' + '/script>'
                     + '<script type="text/javascript">$(document).ready(function() {alert(typeof jQuery.ui);})</' + 'script>';

            $('body').append(html);
        });
    </script>
    </body>
</html>

我们没有收到带有“对象”的警报，而是收到带有“未定义”的警报。

谢谢你和亲切的问候。

编辑：其他人遇到了类似的问题，他们使用的解决方案首先加载外部脚本，然后加载 HTML/纯 JS。链接是：http ://snipplr.com/view/43449/load-external-scripts-first-for-injected-dom-html-content/ 。无论如何，我对这个解决方案不满意，因为它意味着代码中的一些更改，我不确定它是否在所有浏览器上都是 100% 可靠的。

4

3 回答 3

2

而不是使用：

$(document).ready(function()

你应该使用：

$(window).load(function()

它将等待外部内容已经加载（例如图像、字体）

于 2013-02-22T17:57:24.143 回答
2

1. 使用 DOM 加载

正如 Niklas 所说，你的 dom 已经准备好了。

你可以应用这个方法

jQuery.getScript("url",function () { /* on success.. do this */ });

http://api.jquery.com/jQuery.getScript/

http://jsfiddle.net/4crRw/

2.将它们加在一起

http://jsfiddle.net/4crRw/2/

$(document).ready(function ()
{
    var alertWhenDone = function (requiredObjects, callback)
    {
        this.callback = callback;
        this.required = requiredObjects;
        this.addDone = function (label) {
            // remove it from the list
            this.required.splice(this.required.indexOf(label),1);
            if (this.required.length === 0)
            {
                this.callback();
            }
        };
        return this;
    };
    var alertdone = alertWhenDone(['ui','swfloader','font'], function () {
        alert('done');
    });
    jQuery.getScript('http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js',
        function () {
            alertdone.addDone('ui');
        });

    jQuery.getScript('https://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js',
        function () {
            alertdone.addDone('swfloader');
        });

    jQuery.getScript('https://ajax.googleapis.com/ajax/libs/webfont/1.0.19/webfont.js',
        function () {
            alertdone.addDone('font');
        });

});
于 2011-06-06T13:54:00.207 回答
1

jquery.ready()函数在 DOM 层次结构完全加载后立即启动。这通常发生在加载所有图像之后。它不等到脚本/css 文档被加载的原因是因为它们是“链接的”，这意味着它们是从外部加载的，然后在主代码被转换为可查看页面时保留在缓存中。

如果您当前拥有的脚本$document.ready(function{})依赖于外部资产，请使用，<body onload="function()">或者$document.ready($document.load(asset),function{})如果您想加载特定的文档/资产，则使用函数或脚本。

该<body onload="function()">函数与该函数不同，.ready()因为该.ready()函数等待 DOM 构建（正如我之前所说），并且该<body onload="function()">函数等待页面而不是 DOM 实际开始加载或渲染。该.load()函数与事件更不同，因为它将资产、文件甚至代码片段加载到页面中。使用这种方法，理论上会很好，因为这样就不需要在 body 上附加任何东西了。

更多信息（和更详尽的解释）可以在http://api.jquery.com/ready/和http://api.jquery.com/load/找到。

我希望这有帮助。

于 2011-06-06T14:06:01.093 回答