js实现延迟加载的几种方法


Posted in Javascript onApril 24, 2017

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
文本加密解密
Jun 23 Javascript
基于JQuery的cookie插件
Apr 07 Javascript
浅谈Node.js:Buffer模块
Dec 05 Javascript
基于vue2.0+vuex+localStorage开发的本地记事本示例
Feb 28 Javascript
bootstrap+jquery项目引入文件报错的解决方法
Jan 22 jQuery
JavaScript 有用的代码片段和 trick
Feb 22 Javascript
解决vue的 v-for 循环中图片加载路径问题
Sep 03 Javascript
Vue2 添加数据可视化支持的方法步骤
Jan 02 Javascript
通过npm或yarn自动生成vue组件的方法示例
Feb 12 Javascript
解决layer.open弹出框不能获取input框的值为空的问题
Sep 10 Javascript
vue利用全局导航守卫作登录后跳转到未登录前指定页面的实例代码
May 19 Javascript
vue打包时去掉所有的console.log
Apr 10 Vue.js
利用Vue.js+Node.js+MongoDB实现一个博客系统(附源码)
Apr 24 #Javascript
浅析Angular2子模块以及异步加载
Apr 24 #Javascript
Angular2使用Guard和Resolve进行验证和权限控制
Apr 24 #Javascript
详解AngularJS 路由 resolve用法
Apr 24 #Javascript
详解AngularJS ui-sref的简单使用
Apr 24 #Javascript
详解在Angularjs中ui-sref和$state.go如何传递参数
Apr 24 #Javascript
JS实现获取图片大小和预览的方法完整实例【兼容IE和其它浏览器】
Apr 24 #Javascript
You might like
通过对php一些服务器端特性的配置加强php的安全
2006/10/09 PHP
PHP 中dirname(_file_)讲解
2007/03/18 PHP
PHP array 的加法操作代码
2010/07/24 PHP
thinkphp模板继承实例简述
2014/11/26 PHP
简单谈谈php延迟静态绑定
2016/01/26 PHP
PHP创建文件,并向文件中写入数据,覆盖,追加的实现代码
2016/03/25 PHP
PHP实现大数(浮点数)取余的方法
2017/02/18 PHP
javascript 打印内容方法小结
2009/11/04 Javascript
js 页面关闭前的出现提示的实现代码
2011/05/25 Javascript
jsTree 基于JQuery的排序节点 Bug
2011/07/26 Javascript
js判断一个元素是否为另一个元素的子元素的代码
2012/03/21 Javascript
table insertRow、deleteRow定义和用法总结
2014/05/14 Javascript
javascript教程:关于if简写语句优化的方法
2014/05/17 Javascript
jQuery元素的隐藏与显示实例
2015/01/20 Javascript
jquery.cookie.js用法实例详解
2015/12/25 Javascript
js实现定时进度条完成后切换图片
2017/01/04 Javascript
javascript 数据存储的常用函数总结
2017/06/01 Javascript
详解NODEJS的http实现
2018/01/04 NodeJs
React 源码中的依赖注入方法
2018/11/07 Javascript
jQuery实现的3D版图片轮播示例【滑动轮播】
2019/01/18 jQuery
Node.js实现简单管理系统
2019/09/23 Javascript
JavaScript之scrollTop、scrollHeight、offsetTop、offsetHeight等属性学习笔记
2020/07/15 Javascript
跟老齐学Python之坑爹的字符编码
2014/09/28 Python
Python基于identicon库创建类似Github上用的头像功能
2017/09/25 Python
对python实时得到鼠标位置的示例讲解
2018/10/14 Python
Python编写带选项的命令行程序方法
2019/08/13 Python
使用Python生成200个激活码的实现方法
2019/11/22 Python
python实现将字符串中的数字提取出来然后求和
2020/04/02 Python
Python基于pip实现离线打包过程详解
2020/05/15 Python
python + selenium 刷B站播放量的实例代码
2020/06/12 Python
Python虚拟环境库virtualenvwrapper安装及使用
2020/06/17 Python
python中pyplot基础图标函数整理
2020/11/10 Python
清明节网上祭英烈活动总结
2014/04/30 职场文书
初三学习计划书范文
2014/04/30 职场文书
幼儿园大班教师个人工作总结
2015/02/05 职场文书
2016消防宣传标语口号
2015/12/26 职场文书