JS延遲加載加快頁面打開速度示例代碼
更新時(shí)間:2013年12月30日 15:32:58 作者:
使用JS延遲加載可以加快打開速度,下面有幾個(gè)不錯(cuò)的示例,感興趣的朋友可以參考下
第一,JS延遲加載
代碼如下:
<script language="JavaScript" src="" id="my"></script>
<script language="JavaScript">
setTimeout("document.getElementById('my').src='include/...文件...php'; ",3000);//延時(shí)3秒
</script>
第二,JS最后加載
在需要插入JS的地方插入以下代碼:
<SPAN id=L4EVER>LOADING...</SPAN>
當(dāng)然,那個(gè)LOADING…你可以換成自己喜歡的小圖片.看起來很有AJAX效果呢.
然后在頁面最底端插入:
<SPAN class=spanclass id=AD_L4EVER>
你的JS代碼在這里!</SPAN>
<script>L4EVER.innerHTML=AD_L4EVER.innerHTML;AD_L4EVER.innerHTML="";</script>
第三,JS最后加載
想要顯示廣告的位置
<div id="guangg1"></div>
想要顯示的廣告內(nèi)容
<div id="ggad1" style="display:none">
<script language="javascript" src="/include/.......js"></script>
</div>
判斷要顯示的廣告位置是否存在
<script language="javascript">
function chkdiv(divid){
var chkid=document.getElementById(divid);
if(chkid != null)
{return true; }
else
{return false; }
} 最后就是顯示廣告了
if (chkdiv('guangg1')) {
document.getElementById('guangg1').innerHTML= document.getElementById('ggad1').innerHTML;
document.getElementById('ggad1').innerHTML="";
}
</script>
setTimeout用法
setTimeout的標(biāo)準(zhǔn)語法是: setTimeout(表達(dá)式,時(shí)間(毫秒)) 兩個(gè)參數(shù).
在這里著重記下第一個(gè)參數(shù)是一個(gè) function時(shí)的調(diào)用,假設(shè)是一個(gè)函數(shù).
1.函數(shù)無參:
function alertV(){ alert("000"); }
當(dāng)?shù)谝粋€(gè)參數(shù)不加引號(hào)("" 或 '')時(shí),延遲一秒:
setTimeout(alertV,1000);
當(dāng)?shù)谝粋€(gè)參數(shù)加上又引號(hào)時(shí),延遲一秒:
setTimeout("alertV()",1000);
2. 函數(shù)有參:
function alertV(event){ alert("keyCode="+event.keyCode); }
此時(shí)應(yīng)設(shè)置成:
setTimeout(function(){alertV(event);},1000); 不然會(huì)提示參數(shù)未定義.
代碼如下:
復(fù)制代碼 代碼如下:
<script language="JavaScript" src="" id="my"></script>
<script language="JavaScript">
setTimeout("document.getElementById('my').src='include/...文件...php'; ",3000);//延時(shí)3秒
</script>
第二,JS最后加載
在需要插入JS的地方插入以下代碼:
<SPAN id=L4EVER>LOADING...</SPAN>
當(dāng)然,那個(gè)LOADING…你可以換成自己喜歡的小圖片.看起來很有AJAX效果呢.
然后在頁面最底端插入:
復(fù)制代碼 代碼如下:
<SPAN class=spanclass id=AD_L4EVER>
你的JS代碼在這里!</SPAN>
<script>L4EVER.innerHTML=AD_L4EVER.innerHTML;AD_L4EVER.innerHTML="";</script>
第三,JS最后加載
想要顯示廣告的位置
<div id="guangg1"></div>
想要顯示的廣告內(nèi)容
復(fù)制代碼 代碼如下:
<div id="ggad1" style="display:none">
<script language="javascript" src="/include/.......js"></script>
</div>
判斷要顯示的廣告位置是否存在
復(fù)制代碼 代碼如下:
<script language="javascript">
function chkdiv(divid){
var chkid=document.getElementById(divid);
if(chkid != null)
{return true; }
else
{return false; }
} 最后就是顯示廣告了
if (chkdiv('guangg1')) {
document.getElementById('guangg1').innerHTML= document.getElementById('ggad1').innerHTML;
document.getElementById('ggad1').innerHTML="";
}
</script>
setTimeout用法
setTimeout的標(biāo)準(zhǔn)語法是: setTimeout(表達(dá)式,時(shí)間(毫秒)) 兩個(gè)參數(shù).
在這里著重記下第一個(gè)參數(shù)是一個(gè) function時(shí)的調(diào)用,假設(shè)是一個(gè)函數(shù).
1.函數(shù)無參:
function alertV(){ alert("000"); }
當(dāng)?shù)谝粋€(gè)參數(shù)不加引號(hào)("" 或 '')時(shí),延遲一秒:
setTimeout(alertV,1000);
當(dāng)?shù)谝粋€(gè)參數(shù)加上又引號(hào)時(shí),延遲一秒:
setTimeout("alertV()",1000);
2. 函數(shù)有參:
function alertV(event){ alert("keyCode="+event.keyCode); }
此時(shí)應(yīng)設(shè)置成:
setTimeout(function(){alertV(event);},1000); 不然會(huì)提示參數(shù)未定義.
您可能感興趣的文章:
相關(guān)文章
淺談jQuery異步對(duì)象(XMLHttpRequest)
文章淺顯易懂的將jQuery異步對(duì)象分為了5個(gè)步奏,非常有利于我們學(xué)習(xí)記憶,是篇相當(dāng)不錯(cuò)的學(xué)習(xí)jQuery異步對(duì)象的文章,這里推薦給大家。2014-11-11一文總結(jié)JS中邏輯運(yùn)算符的特點(diǎn)
在JavaScript的眾多運(yùn)算符里,提供了三個(gè)邏輯運(yùn)算符&&、||和!,下面這篇文章主要給大家介紹了關(guān)于JS中邏輯運(yùn)算符的特點(diǎn),文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-03-03傳參安全處理window.btoa base64加密,線性對(duì)稱加密
這篇文章主要介紹了傳參安全處理window.btoa base64加密,線性對(duì)稱加密,需要的朋友可以參考下2023-07-07js+CSS 圖片等比縮小并垂直居中實(shí)現(xiàn)代碼
本例子在在 ff 2.0/ ie6 / ie7 中測(cè)試通過。但在 opera 8.5 cn中沒有通過。希望大家測(cè)試。2008-12-12關(guān)于微信小程序?qū)崿F(xiàn)云支付那些事兒
我們?cè)谧鲂〕绦蛑Ц断嚓P(guān)的開發(fā)時(shí),總會(huì)遇到這些難題,下面這篇文章主要給大家介紹了關(guān)于微信小程序?qū)崿F(xiàn)云支付那些事兒,文中通過圖文介紹的非常詳細(xì),需要的朋友可以參考下2021-09-09JavaScript設(shè)計(jì)模式--簡單工廠模式定義與應(yīng)用案例詳解
這篇文章主要介紹了JavaScript設(shè)計(jì)模式--簡單工廠模式定義與應(yīng)用,結(jié)合具體案例形式詳細(xì)分析了JavaScript設(shè)計(jì)模式中簡單工廠模式基本概念、定義、用法與相關(guān)注意事項(xiàng),需要的朋友可以參考下2020-05-05js實(shí)現(xiàn)點(diǎn)擊鏈接后窗口縮小并居中的方法
這篇文章主要介紹了js實(shí)現(xiàn)點(diǎn)擊鏈接后窗口縮小并居中的方法,實(shí)例分析了javascript操作窗口的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-03-03