Принудительная загрузка внешних файлов JavaScript (из Digg, Reddit) для последней загрузки

Question

Я работаю над сайтом WordPress, на котором два внешних файла javascript загружаются примерно посередине страницы. Файлы представляют собой значки от Reddit и Digg, и они часто добавляют около 4-8 секунд к общему времени загрузки страницы, при этом также предотвращая загрузку нижних 50% страницы.

JavaScript и Digg Reddit отображают <iframe> (который, как я полагаю, должен быть полностью загружен до загрузки остальной части моей веб-страницы), и, таким образом, добавляет большое количество дополнительного времени загрузки.

Я пытался переместить теги <script> вниз страницы, прямо перед </body>, но значки отображаются чуть ниже нижнего колонтитула, а не там, где они должны быть.

Как я могу принудительно загрузить эти два внешних файла javascript последними, но по-прежнему отображать их в нужном месте?

Answer 1

Вы можете создать div ["divA"], где вы хотите, чтобы ваши фреймы Digg / Reddit отправлялись [Так что это в основном просто заполнитель]. Когда страница будет загружена, добавьте элемент «script» в заголовок, чтобы можно было загружать сценарии Digg / Reddit. Когда они закончат загрузку, вы можете переместить их из тела в divA.

document.body.removeChild(iframe);
document.body.getElementById("divA").appendChild(iframe);

Answer 2

Быстрый ответ - не простой способ. Если вы используете defer="true" в тегах сценария и они используют document.write, он все равно будет записывать содержимое там, где оно было при загрузке, а не там, где был вставлен тег сценария.

Некоторые ответы на этот вопрос могут вам помочь: Как я могу остановить перезагрузку IFrame при изменении его положения в DOM?

Некоторые другие ответы в этой теме предлагают удалить iframe, а затем снова вставить его. Однако это приведет вас прямо к проблеме в приведенном выше вопросе - это приведет к двойной загрузке содержимого iframe.

Общий подход будет состоять в том, чтобы поместить заполнитель туда, куда вы хотите, а затем переместить его в этот заполнитель, когда они будут готовы.

Answer 3

Когда вы визуализируете теги скрипта, не обязательно должно подразумеваться, где появляется пользовательский интерфейс, который генерируют эти скрипты - что он кажется глупым или сомнительным. Есть ли в сценариях известные функции, позволяющие вам передать им контейнерный элемент div или что-то, в чем можно отобразить их пользовательский интерфейс?

Вы, конечно, правы, загружая их последними, до </body>. Это правильная стратегия.