js延迟加载的方式有哪些?

js的延迟加载有助与提高页面的加载速度,以下是延迟加载的几种方法:

  • 1.使用setTimeout延迟方法的加载时间

    延迟加载js代码,给网页加载留出更多时间

<script type="text/javascript" >
    function A(){
        $.post("/lord/login",{name:username,pwd:password},function(){
            alert("Hello");
        });
    }
    $(function (){
        setTimeout('A()', 1000); //延迟1秒
    })
</script>
  • 2.让js最后加载

例如引入外部js脚本文件时,如果放入html的head中,则页面加载前该js脚本就会被加载入页面,而放入body中,则会按照页面从上倒下的加载顺序来运行JavaScript的代码~~~ 所以我们可以把js外部引入的文件放到页面底部,来让js最后引入,从而加快页面加载速度

  • 3.上述方法2也会偶尔让你收到Google页面速度测试工具的“延迟加载javascript”警告。所以这里的解决方案将是来自Google帮助页面的推荐方案。
//这些代码应被放置在</body>标签前(接近HTML文件底部)
<script type="text/javascript">
    function downloadJSAtOnload() {
        var element = document.createElement("script");
        element.src = "defer.js";
        document.body.appendChild(element);
    }
    if (window.addEventListener)
        window.addEventListener("load", downloadJSAtOnload, false);
    else if (window.attachEvent)
        window.attachEvent("onload", downloadJSAtOnload);
    else window.onload = downloadJSAtOnload;
</script>

这段代码意思是等到整个文档加载完后,再加载外部文件“defer.js”。
使用此段代码的步骤:
1).复制上面代码

2).粘贴代码到HTML的标签前 (靠近HTML文件底部)

3).修改“defer.js”为你的外部JS文件名

4).确保你文件路径是正确的。例如:如果你仅输入“defer.js”,那么“defer.js”文件一定与HTML文件在同一文件夹下。

注意:这段代码直到文档加载完才会加载指定的外部js文件。因此,不应该把那些页面正常加载需要依赖的javascript代码放在这里。而应该将JavaScript代码分成两组。一组是因页面需要而立即加载的javascript代码,另外一组是在页面加载后进行操作的javascript代码(例如添加click事件或其他东西)。这些需等到页面加载后再执行的JavaScript代码,应放在一个外部文件,然后再引进来。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
settimeout是JavaScript中的一个方法,可以用来延迟执行一段代码。在使用setTimeout延迟加载JS时,可以通过设定延迟的时间来控制什么时候执行这段代码。 延迟加载JS以下几个优点: 1. 提高网页加载性能:通过将一些不必要的JS代码延迟加载,可以减少网页的加载时间,提高用户的访问速度和体验。 2. 减少页面阻塞:JS代码的加载和执行会阻塞页面的渲染,如果直接将所有的JS代码都放在页面头部加载,会导致用户在页面加载过程中看到空白的页面。通过延迟加载JS,可以让页面在加载的同时渲染出页面内容,提高用户的体验。 3. 对于某些插件和第三方库,可以根据需要进行延迟加载,只在需要的时候加载相应的代码,减少页面的负载。 使用settimeout延迟加载JS的方法如下: 1. 在需要延迟加载的位置,使用setTimeout方法包装一段JS代码,设置延迟的时间。 2. 在延迟时间到达后,setTimeout会执行包装的代码。 例如,可以使用如下代码延迟加载一个JS文件: setTimeout(function(){ var script = document.createElement('script'); script.src = 'example.js'; document.head.appendChild(script); }, 2000); 上述代码会在页面加载后延迟2秒钟后加载example.js文件。 需要注意的是,在使用settimeout延迟加载JS时,延迟的时间应该根据实际情况进行调整,避免加载太早或者加载太晚导致的问题。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值