JavaScript 延迟加载与最后加载实现方法详解

作者:函数茶馆

时间:2026-10-25

浏览:662

本文介绍了 JavaScript 中两种常见的异步加载策略:利用 setTimeout 实现延迟加载,以及在页面底部插入脚本以实现最后加载。详细讲解了 setTimeout 处理无参和有参函数的语法差异,并对比了 jQuery 中 delay 方法的用法,帮助开发者优化页面加载性能。

文章目录

JavaScript 延迟加载实现

第一种方案是 JavaScript 的延迟加载。

具体实现代码如下:

 
<script language="JavaScript" src="" id="my"></script>
<script>
setTimeout("document.getElementById('my').src='include/common.php'; ",3000);//延时3秒
</script>

通常情况下,开发者会利用 setTimeout 函数来实现这一功能。


第二种方案是 JavaScript 的最后加载。

JavaScript 最后加载方案

在需要插入 JS 代码的位置,插入以下代码:


具体代码如下:

 
<SPAN id=L4EVER>LOADING...</SPAN>

当然,那个LOADING…你可以换成自己喜欢的小图片。看起来很有AJAX效果呢。


然后在页面最底端插入:


具体代码如下:

 
<SPAN class=spanclass id=AD_L4EVER><script src="1.js"></script></SPAN>

js代码


具体代码如下:

 
<script>L4EVER.innerHTML=AD_L4EVER.innerHTML;AD_L4EVER.innerHTML="";</script>


setTimeout 函数语法详解

setTimeout 的标准语法包含两个参数:setTimeout(表达式, 时间(毫秒))。



在这里着重记录第一个参数是一个 function 时的调用,假设是一个函数。



1. 函数无参的情况:


function alertV(){ alert("000"); }



当第一个参数不加引号("" 或 '')时,延迟一秒:


setTimeout(alertV,1000);



当第一个参数加上引号时,延迟一秒:


setTimeout("alertV()",1000);




2. 函数有参的情况:



function alertV(event){ alert("keyCode="+event.keyCode); }



此时应设置成:


setTimeout(function(){alertV(event);},1000); 不然会提示参数未定义。


setTimeout(function () {
    $("#id").html(datastr);
  }, 1000);

jquery 的通过 delay 实现,例如


$("#id").delay(1000).html(datastr);

setTimeout('yourFunction()',5000); 5秒后执行yourFunction(),只执行一次 setInterval('yourFunction()',5000); 每隔5秒执行一次u 如果在yourFunction()中再次调用了setTimeout('yourFunction()',5000),可以完成类似于 setInterval('yourFunction()',5000)的功能

要是哪位还有好的可行方法,谢谢共享.

实用工具推荐

电子包浆

绿化、压缩、噪点和虚拟水印,自由调节做旧程度。

使用 ›
图片压缩

选择画质和输出格式,预览压缩前后的大小。

使用 ›
相关文章