Как загрузить рекламный код последним на странице или асинхронно, если в объявлении используется document.write?

Question

Я помогаю с сайтом, и у нас возникают проблемы с загрузкой страницы из-за рекламы, которая иногда занимает несколько секунд, чтобы загрузить. Поскольку реклама вызывается с использованием тегов < script, браузер перестает анализировать страницу до тех пор, пока объявления не будут полностью загружены. То, что мы ищем, - это способ загрузки объявлений со стороны клиента, чтобы страница могла отображаться полностью, а затем реклама начнет загружаться, что значительно улучшит работу пользователя.

Я пробовал много всего, чтобы заставить это работать, но ни одно решение на самом деле не показывает рекламу. Вы можете увидеть сайт по адресу http://magic.tcgplayer.com/. В верхней части страницы есть одно объявление в виде баннера, а другое - в правой колонке. Оба объявления загружаются с использованием тегов <. Я попытался загрузить с помощью ленивых загрузочных javascripts, но они не сработали. Я попытался использовать writeCapture.js (отличный скрипт, кстати), но реклама не загружается. Я посмотрел на решения bezen.org и labjs.com, но я не уверен, как применять идеи из этих ресурсов. Также обратите внимание, что сценарий объявлений находится на удаленном сервере и не может быть скопирован на наш сервер.

Любая помощь очень ценится.

Answer 1

С момента своего развития теперь можно использовать атрибут defer или async.

Я загружаю свои сценарии с async, но defer безопаснее для старых браузеров.

См. W3 Schools, который содержит данные как для асинхронных, так и для отсрочки.

Answer 2

Поместите объявление в iframe. Iframe должен загрузить JavaScript с помощью document.write().

Answer 3

Я пытаюсь найти способ для асинхронного загрузки объявления Google, и я нахожу его.

Большой сайт douban использовать iframe для хранения js и асинхронной нагрузки iframe.

Это код JS:

function google_ad() { 
    function createIframe() { 
     var ad_frame = document.createElement("iframe"); 
     ad_frame.src = "/js/google_ad.htm"; 
     ad_frame.id = "google_ad_frame"; 
     ad_frame.scrolling = "no"; 
     ad_frame.width = "260px"; 
     ad_frame.height = "260px"; 
     document.getElementById("google_ad").appendChild(ad_frame); 
    }; 

    if (window.addEventListener) { 
     window.addEventListener("load", createIframe, false); 
    } else if (window.attachEvent) { 
     window.attachEvent("onload", createIframe); 
    } else { 
     window.onload = createIframe; 
    } 
} 

И это код фрейма, который с Google AdSense:

<script type='text/javascript' src='http://partner.googleadservices.com/gampad/google_service.js'> 
</script> 
<script type='text/javascript'> 
    GS_googleAddAdSenseService("ca-pub-1281485759256908"); 
    GS_googleEnableAllServices(); 
</script> 
<script type='text/javascript'> 
    GA_googleAddSlot("ca-pub-1281485759256908", "ad_right"); 
</script> 
<script type='text/javascript'> 
    GA_googleFetchAds(); 
</script> 

<script type="text/javascript"> 
    GA_googleFillSlot("ad_right"); 
</script> 

Итак, я просто использую это:

<div id="google_ad" style="margin-top:20px;text-align:center;border:solid 17px #FFFFFF;"> 
    <script type="text/javascript">google_ad();</script> 
</div> 

И он загружает рамку.