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 相关文章推荐
屏蔽鼠标右键、Ctrl+n、shift+F10、F5刷新、退格键 的javascript代码
Apr 01 Javascript
IE和Mozilla的兼容性汇总event
Aug 12 Javascript
javascript 进度条 实现代码
Jul 30 Javascript
JQuery标签页效果的两个实例讲解(4)
Sep 17 Javascript
jQuery的内容过滤选择器学习教程
Apr 18 Javascript
微信开发 js实现tabs选项卡效果
Oct 28 Javascript
原生node.js案例--前后台交互
Feb 20 Javascript
详解vue+vueRouter+webpack的简单实例
Jun 17 Javascript
JavaScript数组去重的几种方法
Apr 07 Javascript
微信小程序页面渲染实现方法
Nov 06 Javascript
vue点击标签切换选中及互相排斥操作
Jul 17 Javascript
详解如何使用React Hooks请求数据并渲染
Oct 18 Javascript
利用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
Warning: session_destroy() : Trying to destroy uninitialized sessionq错误
2011/06/16 PHP
PHP_NETWORK_GETADDRESSES: GETADDRINFO FAILED问题解决办法
2014/05/04 PHP
PHP封装XML和JSON格式数据接口操作示例
2019/03/06 PHP
从父页面读取和操作iframe中内容方法
2009/07/25 Javascript
非阻塞动态加载javascript广告实现代码
2010/11/17 Javascript
关于event.cancelBubble和event.stopPropagation()的区别介绍
2011/12/11 Javascript
jQuery Mobile的loading对话框显示/隐藏方法分享
2013/11/26 Javascript
js实现局部页面打印预览原理及示例代码
2014/07/03 Javascript
纯JS实现旋转图片3D展示效果
2015/04/12 Javascript
Jquery中map函数的用法
2016/06/03 Javascript
微信小程序 参数传递详解
2016/10/24 Javascript
JS根据生日月份和日期计算星座的简单实现方法
2016/11/24 Javascript
AngularJs中 ng-repeat指令中实现含有自定义指令的动态html的方法
2017/01/19 Javascript
jQuery Ajax全解析
2017/02/13 Javascript
vue+swiper实现侧滑菜单效果
2017/12/28 Javascript
AjaxUpLoad.js实现文件上传功能
2018/03/02 Javascript
浅谈vue引用静态资源需要注意的事项
2018/09/28 Javascript
微信小程序自定义弹窗实现详解(可通用)
2019/07/04 Javascript
VSCode 添加自定义注释的方法(附带红色警戒经典注释风格)
2020/08/27 Javascript
Vue实现穿梭框效果
2020/09/30 Javascript
[36:33]完美世界DOTA2联赛循环赛 Matador vs Forest 第一场 11.06
2020/11/06 DOTA
[57:09]DOTA2-DPC中国联赛 正赛 Phoenix vs Dynasty BO3 第一场 1月26日
2021/03/11 DOTA
一键搞定python连接mysql驱动有关问题(windows版本)
2016/04/23 Python
python 中random模块的常用方法总结
2017/07/08 Python
Python3实现转换Image图片格式
2018/06/21 Python
python中的decimal类型转换实例详解
2019/06/26 Python
详解一种用django_cache实现分布式锁的方式
2019/09/01 Python
pytorch实现mnist数据集的图像可视化及保存
2020/01/14 Python
使用Python求解带约束的最优化问题详解
2020/02/11 Python
selenium自动化测试入门实战
2020/12/21 Python
python中threading和queue库实现多线程编程
2021/02/06 Python
HTML5的语法变化介绍
2013/08/13 HTML / CSS
html5的canvas方法使用指南
2014/12/15 HTML / CSS
班级入场式解说词
2014/02/01 职场文书
2014年仓库保管员工作总结
2014/12/03 职场文书
党章党规党纪学习心得体会
2016/01/14 职场文书