Асинхронный вызов JavaScript файла LinkWall

Я уже давно планировал рассказать вам о таком замечательном сервисе как LinkWall, но всё руки не дотягивались. Не дотянутся они и сейчас. Если что читайте о нём у Витька тут. Но если коротко, то LinkWall позволяет организовать потоковые продажи непрямых ссылок на вашем сайте.

Для этого вам нужно установить сгенерированный код системы и вот тут-то и начинаются проблемы. В частности, с недавних пор, сервис перестал справляться с той нагрузкой, которую создают её участники. В результате тормозит загрузка сайтов участников. Многие даже стали убирать код системы. Те, кто платил – получают фигу, а те, кто установил код – не самое лицеприятное положение. В общем, предлагаю своё решение проблемы.

В целом ничего сложного здесь нет. Код LinkWall представляет собой вызов авто-генерируемого JavaScript файла. Понятно, что такой вариант вызова JavaScript файла, в случае проблем у сервиса, тормозит и сайт на котором установлен такой код. Решение заключается в псевдо-асинхронном вызове JavaScript файла, т.е. уже после загрузки самой странице. Конечно, видеть, что страница долго грузится неприятно, но у вас не будет проблем с частичной её загрузкой.

Ну а теперь перейдём к делу. Для наглядности возьму код LinkWall, который был установлен на моём блоге, вот он:

<script charset="utf-8" src="http://linkwall.ru/links/get/642.js"></script>

Ключевым здесь является идентификатор в имени JavaScript файла. К слову, такой файл лучше было бы кэшировать, чего в системе явно нет. Но что-то утверждать не возьмусь. Просто хотелось бы решить проблемы сервиса. Хотя, если есть проблемы с устойчивостью, то решение здесь может быть только одно – искать другого хостинг профайдера имхо.

Асинхронный вызов JavaScript файла LinkWall

Основная проблема поставленной задачи заключается в том, что вызываемый файл осуществляет вывод, т.е. использует document.write. Таким образом, говорить о полноценном асинхронном вызове не приходится. Есть интересное решение extsrc.js, но мне не хотелось использовать сторонних библиотек. Да и в теме этой я не слишком разобрался. Так что пришлось идти на компромисс.

Что я сделал? Я разместил JavaScript-код в самом конце web-страниц, перед тем же </BODY, в невидимый DIV, т.е. вот таким образом:

<div id="linkwall2" style="display:none"><script charset="utf-8" src="http://linkwall.ru/links/get/642.js"></script></div>

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

По завершению загрузки web-страницы, нам останется лишь перенести элемент linkwall2 в нужное место, например в DIV с идентификатором linkwall:

<div id="linkwall"></div>

В самом простейшем варианте это может выглядеть следующим образом:

<script>
window.onload = function() {
  document.getElementById('linkwall').appendChild(document.getElementById('linkwall2')); }
</script>

Этот вариант не требует подключения каких-то сторонних библиотек и автоматически убирает style="display:none" в исходном DIV. Тоже самое и более гибко, в плане определения момента загрузки web-страницы, может сделать с использованием jQuery библиотеки:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'></script>
<script>
$(document).ready(function(){
  $('#linkwall2').detach().appendTo('#linkwall'); });
</script>

Очевидно, что один из приведённых вариантов желательно разметить в теге HEAD. Надеюсь, что решение вам поможет, и вы сможете заработать на своём сайте. На этом у меня всё. Спасибо за внимание. Удачи!

Короткая ссылка: http://goo.gl/qDwMHf