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代码,应放在一个外部文件,然后再引进来。

js延时加载的方法的更多相关文章

  1. JS 异步加载的方法

    (1) defer,只支持IE : <script type="text/javascript" defer="defer"> </scrip ...

  2. 自己写的保证js顺序加载的方法

    var arr =["test1.js","test2.js","test3.js"] loadScripts:function(arr){ ...

  3. js jquery 页面加载初始化方法

    js jquery 页面加载初始化方法 一.js页面加载初始化方法 // 1.在body里面写初始化方法. <body onload='init()'> </body> < ...

  4. iOS 延时加载

    这里列举了四种线程延时加载的方法, 1.performSelector方法 此方法必须在主线程中执行,并不是阻塞当前的线程 [self performSelector:@selector(delayM ...

  5. 服务器文档下载zip格式 SQL Server SQL分页查询 C#过滤html标签 EF 延时加载与死锁 在JS方法中返回多个值的三种方法(转载) IEnumerable,ICollection,IList接口问题 不吹不擂,你想要的Python面试都在这里了【315+道题】 基于mvc三层架构和ajax技术实现最简单的文件上传 事件管理

    服务器文档下载zip格式   刚好这次项目中遇到了这个东西,就来弄一下,挺简单的,但是前台调用的时候弄错了,浪费了大半天的时间,本人也是菜鸟一枚.开始吧.(MVC的) @using Rattan.Co ...

  6. 一段实现页面上的图片延时加载的js

    大家如果使用firebug去查看的话就会发现,当你滚动到相应的行时,当前行的图片才即时加载的,这样子的话页面在打开只加可视区域的图片,而其它隐藏的图片则不加载,一定程序上加快了页面加载的速度,对于比较 ...

  7. js实现网页图片延时加载的原理和代码 提高网站打开速度

    有时我们看到一些大型网站,页面如果有很多图片的时候,当你滚动到相应的行时,当前行的图片才即时加载的,这样子的话页面在打开只加可视区域的图片,而其它隐藏的图片则不加载,一定程序上加快了页面加载的速度,对 ...

  8. 图片延时加载jquery.inview.js用法详解

    我们在网站上总能见到这样的效果,若是有图片,图片都是先用loading加载一小段时间,然后紧接着出来要显示的图片,即效果如下: v2_loading.gif,几秒钟时间过渡到v2_pic_01_s.j ...

  9. js动态加载css文件和js文件的方法

    今天研究了下js动态加载js文件和css文件的方法. 网上发现一个动态加载的方法.摘抄下来,方便自己以后使用 [code lang="html"] <html xmlns=& ...

随机推荐

  1. 卷积神经网络-进化史】从LeNet到AlexNet

    目录视图 摘要视图 订阅 [置顶] [卷积神经网络-进化史]从LeNet到AlexNet 标签: cnn 卷积神经网络 深度学习 2016年05月17日 23:20:3046038人阅读 评论(4)  ...

  2. NSSet所有API学习。

    /****************集合(NSSet)和数组(NSArray)有相似之处,都是存储不同的对象的地址.只是NSArray是有序的集合,NSSet是无序的集合,同一时候NSSet能够保证数据 ...

  3. 【转】React 常用面试题目与分析

    作者:王下邀月熊链接:https://zhuanlan.zhihu.com/p/24856035来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处. 本文有一定概率为水文,怕 ...

  4. Java文件实时监控Commons-io

    今天看到一网友写的 Java 文件监控,实时监控文件加载 ,突然想到Commons-io中已有此功能的实现,先温习下 写个简单的Demo: 有三种方式: 1.java common.io    内部实 ...

  5. hdnoip2017

    T1: 小喵喵有 n 个小鱼干排成一列,其中第 i个小鱼干有两种属性,美味度 ai 和特殊度 bi 现在小喵喵要吃掉一些小鱼干,出于一些原因,小喵喵会吃掉连续的一段区间中的所有小鱼干. 如果吃掉了 [ ...

  6. bzoj 2017: [Usaco2009 Nov]硬币游戏【dp】

    废了废了,一个小dp都想不出来 把c数组倒序一下,变成1在最下,设f[i][j]为某一人取完j个之后还剩1~i的硬币,转移的话应该是f[i][j]=max(s[i]-f[i-k][k]),就是1~n的 ...

  7. bzoj 1653: [Usaco2006 Feb]Backward Digit Sums【dfs】

    每个ai在最后sum中的值是本身值乘上组合数,按这个dfs一下即可 #include<iostream> #include<cstdio> using namespace st ...

  8. codevs1669(dfs)子集和目标值

    1692 子集和的目标值  时间限制: 1 s  空间限制: 128000 KB  题目等级 : 钻石 Diamond   题目描述 Description 给定n个整数in和目标值T,求某一非空子集 ...

  9. [Swift通天遁地]一、超级工具-(16)使用JTAppleCalendar制作美观的日历

    ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号:山青咏芝(shanqingyongzhi)➤博客园地址:山青咏芝(https://www.cnblogs. ...

  10. (DP)51NOD 1085 背包问题

    在N件物品取出若干件放在容量为W的背包里,每件物品的体积为W1,W2……Wn(Wi为整数),与之相对应的价值为P1,P2……Pn(Pi为整数).求背包能够容纳的最大价值. Input 第1行,2个整数 ...