Почему jQuery document.ready из динамического append () не ожидает внешних скриптов / стилей? - PullRequest
Новая
       8

Почему jQuery document.ready из динамического append () не ожидает внешних скриптов / стилей?

0 голосов
/ 06 июня 2011

У меня проблема с триггерной функцией document.ready в jQuery.Я не уверен, связано ли это с jQuery или с поведением браузеров, но вот что происходит: когда вы пытаетесь динамически загрузить скрипт с помощью метода .append (), а также задаете обработчик для document.ready (),событие document.ready () будет запущено до загрузки внешнего файла script / css.Это не относится к файлам script / 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 / plain JS.Ссылка: http://snipplr.com/view/43449/load-external-scripts-first-for-injected-dom-html-content/. В любом случае, я не доволен этим решением, поскольку оно подразумевает несколько изменений в коде, и я не уверен, что оно надежно на 100% во всех браузерах.

Ответы [ 3 ]

2 голосов
/ 22 февраля 2013

Вместо использования: 

$(document).ready(function()

Вы должны использовать: 

$(window).load(function()

Он будет ожидать загрузки внешнего контента (например, изображений, шрифтов)

2 голосов
/ 06 июня 2011

1. Загрузка с помощью 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');
        });

});
1 голос
/ 06 июня 2011

Функция jquery .ready() запускается, как только иерархия DOM полностью загружена. Это обычно происходит после того, как все изображения были загружены. Причина, по которой он не ожидает загрузки документов scripts / css, заключается в том, что они «связаны», то есть загружаются извне и остаются в кеше, пока основной код транслируется на страницу, доступную для просмотра.

Если скрипт, который у вас есть в $document.ready(function{}), использует внешние ресурсы, используйте <body onload="function()"> или $document.ready($document.load(asset),function{}), если вы хотите загрузить определенные документы / активы, тогда функция или скрипт.

Функция <body onload="function()"> отличается от функции .ready(), потому что функция .ready() ожидает построения DOM (как я говорил ранее), а функция <body onload="function()"> ожидает страницу, а не DOM, на самом деле начать загружать или рендерить. Функция .load() отличается от события, поскольку она загружает ресурсы, файлы или даже фрагменты кода на страницу. Использование этого метода в теории было бы хорошо, потому что тогда не было бы необходимости добавлять что-либо к телу.

Более подробную информацию (и более подробное объяснение) можно найти в http://api.jquery.com/ready/ и http://api.jquery.com/load/.

Надеюсь, это поможет.

...