javascript 廣告後載入,載入完頁面再載入廣告_javascript技巧

來源:互聯網
上載者:User

先載入完頁面再載入廣告的原理:

網頁開啟的順序都是按頁面從上到下的順序載入完成的,所以要想使廣告不影響頁面開啟速度,就要等頁面全部開啟完成後,再載入JS代碼。等頁面載入完再載入廣告其實就是將廣告的 JS 代碼放在頁面的底部,等頁面內容開啟完成後再載入到廣告代碼,再用頁面上預留好的的 DIV 輸出廣告。

使用方法:
1、將以下代碼放置頁面中想要放廣告的地方

複製代碼 代碼如下:

<div id="myads">載入中…</div>

2、將一下代碼放置頁面底部,也就是footer,php檔案的底部。
複製代碼 代碼如下:

<div id="span_myads">這裡放廣告代碼</div>
<script type="text/javascript">
document.getElementById("myads").innerHTML = document.getElementById("span_myads").innerHTML;
document.getElementById("span_myads").innerHTML = "";
</script>


OK,這樣就實現了先載入完頁面再載入廣告了,怎麼樣不影響大家閱讀吧.

上面的方法可以載入任何方式的廣告,但現在百度與google的都不讓使用了,容易造成廣告的二次載入,點擊率也會降低。下面雲棲社區小編為大家分享下,比較新的載入廣告的方式:

1、可以載入字串類型與google類型的

<div id="logo_m"></div><script>function doad(datastr,id){ //getid(id).innerHTML = datastr; 這個是原生js的寫法$("#"+id).html(datastr); //這個是jquery寫法}/*上面的都是直接的字串寫入,不能是js代碼下面的代碼利用的是jquery的append載入google廣告不錯,百度的好像不能用。後載入百度的可以是用百度管家內建的函數。*/function doad2(datastr,id){ $("#"+id).append(datastr);}var logo_m='<a href="http://www.danhw.com/" target="_blank"><img src="yun_qi_img/kongbao_370.gif" width=370 height=60 /></a>';doad(logo_m,'logo_m');</script>

2、可以載入google廣告的代碼

$(document).ready(function(){$('#google_ads_1').append("" +"<script src=\"\/\/pagead2.googlesyndication.com/pagead/js/adsbygoogle.js\"><\/script>"+"<!-- question-side -->"+"<ins class=\"adsbygoogle\""+"   style=\"display:inline-block;width:728px;height:90px\""+"   data-ad-client=\"ca-pub-345345345345\""+"   data-ad-slot=\"345345345\"></ins>"+"<script>"+"  (adsbygoogle = window.adsbygoogle || []).push({});"+"<\/script>");});

一般都是頁面完全載入完,再加的廣告,當然現在google現在新出的非同步載入廣告的代碼也是挺快的,不會卡網頁了。
上面的都是後載入google的非同步廣告代碼。

對於這樣的字元載入方法,個人不太喜歡,我還是比較喜歡這樣的,代碼如下

var botad='<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>';botad+='<ins class="adsbygoogle" style="display:inline-block;width:336px;height:280px" data-ad-client="ca-pub-343534534" data-ad-slot="6343459"></ins><script>(adsbygoogle = window.adsbygoogle || []).push({});</script>';$(document).ready(function(){$('#google_ads_1').append();});

3、可以載入百度廣告同盟代碼
百度管家內建的後載入廣告的代碼,基於jquery

<div id="tonglanbd"></div><script type="text/javascript">$.getScript("http://cbjs.baidu.com/js/m.js", function() {BAIDU_CLB_fillSlotAsync("廣告id,不能帶u","tonglanbd");});</script>

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.