Heim > Web-Frontend > js-Tutorial > 利用JS延迟加载百度分享代码,提高网页速度_javascript技巧

利用JS延迟加载百度分享代码,提高网页速度_javascript技巧

WBOY
Freigeben: 2016-05-16 17:30:45
Original
1546 Leute haben es durchsucht

发现很多网站在放置百度分享代码的时候,简单的将分享代码放置到固定的网页位置就完事了,这是非常致命的方式。因为,我经常打开一个网页的时候,发现在网页加载到分享代码的时候,有时候花上几秒的时候来请求百度的服务器,最后展示分享按钮。

其实,像这样对网页来说不是非常重要的功能,我们大可以用JS来延迟加载,从而提高网页主要内容的快速加载显示。
这里分享下我的放置方式。
一、copy百度分享代码,如下:

复制代码 代码如下:
















二、放置代码
认真分析上面的分享代码,我们可以发现,其中有3个js脚本标签,这些都是有可能影响网页呈现速度的,最后发现,其实,只有最后一个<script>标签的作用是请求百度服务器,展示分享图片和链接。那么,这条JS我们大可放到最后加载。<BR><STRONG>下面是我做的一个demo:<BR><div class="codetitle"><span><a style="CURSOR: pointer" data="25629" class="copybut" id="copybut25629" onclick="doCopy('code25629')"><U>复制代码 代码如下:<div class="codebody" id="code25629"><BR><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <BR><html> <BR> <head> <BR> <title>JS延迟加载百度分享代码,提高网页速度 <BR> <meta http-equiv="Content-Type" content="text/html;charset=gb2312" /> <BR> <style type="text/css"> <BR> body{margin:0px;padding:0px;font-size:12px;} <BR> #copyright{clear:both;} <BR> <BR> <br><br> <body> <BR> <div id="baidu-share"> <BR> <!-- Baidu Button BEGIN --><BR> <div id="bdshare" class="bdshare_t bds_tools_32 get-codes-bdshare"> <BR> <a class="bds_tsina"> <BR> <a class="bds_qzone"> <BR> <a class="bds_tqq"> <BR> <a class="bds_renren"> <BR> <a class="bds_douban"> <BR> <span class="bds_more"> <BR> <a class="shareCount"> <BR> <BR> <script type="text/javascript" id="bdshare_js" data="type=tools&uid=0" ></script>
           
           
       
       

       
   
Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage