Как отложить встраивание JavaScript? - PullRequest
Новая
       0

Как отложить встраивание JavaScript?

1 голос
/ 17 февраля 2012

Я встраиваю виджет трендов Google в боковую панель моего сайта, который задерживает загрузку всей страницы. Кроме того, иногда скрипт никогда не перестает загружаться, что почти приводит к сбою моего браузера. Сценарий выглядит так: 

<script type="text/javascript" src="http://www.gmodules.com/ig/ifr?url=http%3A%2F%2Fwww.google.com%2Fig%2Fmodules%2Fgoogle_insightsforsearch_relatedsearches.xml&amp;up__results_type=RISING&amp;up__property=empty&amp;up__search_term=&amp;up__location=SE&amp;up__category=0&amp;up__time_range=1-m&amp;up__max_results=10&amp;synd=open&amp;w=252&amp;h=350&amp;lang=sv&amp;title=Google+Trender&amp;border=0&amp;output=js"></script>

Он просто возвращает разметку, которую я не могу изменить, и, насколько я понимаю, я не могу поместить этот скрипт в нижний колонтитул моего сайта, а затем разместить на сайте элемент html, который заменяется после загрузки скрипта. Как я могу отложить кодирование этого скрипта?

Ответы [ 2 ]

1 голос
/ 17 февраля 2012
1 голос
/ 17 февраля 2012

В этом примере я буду предполагать, что ваш скрипт в данный момент находится где-то посередине вашей страницы, как это ... 

<div id="widget">
    <script src="google..."></script>
</div>

... а также что скрипт по существу выгружает контент куда угодноон оказывается размещенным, что не позволяет вам переместить его в конец документа.

Вы можете добавить элемент script позже, например так ... 

<body>
    ...
    <div id="widget">
    </div>
    ....
    <script type="text/javascript">
        var widgetScript = document.createElement('script')
        widgetScript.setAttribute('type', 'text/javascript')
        widgetScript.setAttribute('src', 'http://www.gmodules.com/ig/ifr?url=http%3A%2F%2Fwww.google.com%2Fig%2Fmodules%2Fgoogle_insightsforsearch_relatedsearches.xml&amp;up__results_type=RISING&amp;up__property=empty&amp;up__search_term=&amp;up__location=SE&amp;up__category=0&amp;up__time_range=1-m&amp;up__max_results=10&amp;synd=open&amp;w=252&amp;h=350&amp;lang=sv&amp;title=Google+Trender&amp;border=0&amp;output=js')
        document.getElementById('widget').appendChild(widgetScript);
    </script>
</body>

Так что скриптзагружает скрипт виджета прямо внизу вашей страницы, поэтому он будет работать только после того, как ваш DOM будет в значительной степени готов.Затем он создает тег сценария и добавляет его к элементу, в котором вы его хотите.

ОБНОВЛЕНИЕ - основываясь на ваших отзывах об этом методе, эта альтернатива может помочь, хотя и немного "gnarly ".

Вот пример для JSFiddle .Обратите внимание, что страница видима, хотя виджет все еще загружается.

Это работает, загружая скрипт в скрытый div в самом низу страницы, а затем, когда он загружается, перемещая содержимоескрытый div в видимом div виджета, который находится дальше в потоке страницы.

...