首页 web前端 js教程 如何实现javascript延时加载

如何实现javascript延时加载

Jul 22, 2021 am 11:54 AM
js 延迟加载

实现方法:1、使用setTimeout方法,语法“setTimeout('js方法',延迟时间);”;2、引入外部js脚本文件时,放入body中,则会按照页面从上倒下的加载顺序来运行JavaScript的代码。

如何实现javascript延时加载

本教程操作环境:windows7系统、javascript1.8.5版、Dell G3电脑。

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

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

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

<script type="text/javascript" >
  function A(){
    $.post("/lord/login",{name:username,pwd:password},function(){
      alert("Hello");
    });
  }
  $(function (){
    setTimeout(&#39;A()&#39;, 1000); //延迟1秒
  })
</script>
登录后复制

2.让js最后加载

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

上述方法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高级教程

以上是如何实现javascript延时加载的详细内容。更多信息请关注PHP中文网其他相关文章!

本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

Video Face Swap

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

推荐:优秀JS开源人脸检测识别项目 推荐:优秀JS开源人脸检测识别项目 Apr 03, 2024 am 11:55 AM

人脸检测识别技术已经是一个比较成熟且应用广泛的技术。而目前最为广泛的互联网应用语言非JS莫属,在Web前端实现人脸检测识别相比后端的人脸识别有优势也有弱势。优势包括减少网络交互、实时识别,大大缩短了用户等待时间,提高了用户体验;弱势是:受到模型大小限制,其中准确率也有限。如何在web端使用js实现人脸检测呢?为了实现Web端人脸识别,需要熟悉相关的编程语言和技术,如JavaScript、HTML、CSS、WebRTC等。同时还需要掌握相关的计算机视觉和人工智能技术。值得注意的是,由于Web端的计

Spring Data JPA 的架构和工作原理是什么? Spring Data JPA 的架构和工作原理是什么? Apr 17, 2024 pm 02:48 PM

SpringDataJPA基于JPA架构,通过映射、ORM和事务管理与数据库交互。其存储库提供CRUD操作,派生查询简化了数据库访问。此外,它使用延迟加载,仅在必要时检索数据,从而提高了性能。

Linux 动态链接与静态链接原来是这么回事? Linux 动态链接与静态链接原来是这么回事? Feb 05, 2024 pm 05:45 PM

老规矩,先提出几个问题:为什么要进行动态链接?如何进行动态链接?什么是地址无关代码技术?什么是延迟绑定技术?如何在程序运行过程中进行显式链接?为什么要进行动态链接?动态链接的出现是为了解决静态链接的一些缺点:节约内存和磁盘空间:如下图所示,Program1和Program2分别包含Program1.o和Program2.o两个模块,他们都需要Lib.o模块。静态链接情况下,两个目标文件都用到Lib.o这个模块,所以它们同时在链接输出的可执行文件Program1和program2中有副本,同时运行

解码Laravel性能瓶颈:优化技巧全面揭秘! 解码Laravel性能瓶颈:优化技巧全面揭秘! Mar 06, 2024 pm 02:33 PM

解码Laravel性能瓶颈:优化技巧全面揭秘!Laravel作为一款流行的PHP框架,为开发者提供了丰富的功能和便捷的开发体验。然而,随着项目规模增大和访问量增加,我们可能会面临性能瓶颈的挑战。本文将深入探讨Laravel性能优化的技巧,帮助开发者发现并解决潜在的性能问题。一、数据库查询优化使用Eloquent延迟加载在使用Eloquent查询数据库时,避免

html图片过大怎么办 html图片过大怎么办 Apr 05, 2024 pm 12:24 PM

优化 HTML 图片过大的方法有:优化图像文件大小:使用压缩工具或图像编辑软件。使用媒体查询:根据设备动态调整图像大小。实现延迟加载:仅在图像进入可视区域时加载。使用 CDN:将图像分发到多个服务器。使用图像占位符:在图像加载时显示占位图像。使用缩略图:显示图像的较小版本并单击后加载全尺寸图像。

Java JPA 性能优化秘籍:让你的应用程序飞起来 Java JPA 性能优化秘籍:让你的应用程序飞起来 Feb 19, 2024 pm 09:03 PM

文章关键字:JavaJPA性能优化ORM实体管理JavaJPA(JavaPersistanceapi)是一种对象关系映射(ORM)框架,它允许你使用Java对象来操作数据库中的数据。JPA提供了与数据库交互的统一API,使得你可以使用同样的代码访问不同数据库。此外,JPA还支持懒加载、缓存和脏数据检测等特性,可以提高应用程序的性能。然而,如果使用不当,JPA性能可能会成为你应用程序的瓶颈。以下是一些常见的性能问题:N+1查询问题:当你在应用程序中使用JPQL查询时,可能遇到N+1查询问题。在这种

Hibernate 如何优化数据库查询性能? Hibernate 如何优化数据库查询性能? Apr 17, 2024 pm 03:00 PM

优化Hibernate查询性能的技巧包括:使用延迟加载,推迟加载集合和关联对象;使用批处理,组合更新、删除或插入操作;使用二级缓存,将经常查询的对象存储在内存中;使用HQL外连接,检索实体及其相关实体;优化查询参数,避免SELECTN+1查询模式;使用游标,以块的方式检索海量数据;使用索引,提高特定查询的性能。

js和vue的关系 js和vue的关系 Mar 11, 2024 pm 05:21 PM

js和vue的关系:1、JS作为Web开发基石;2、Vue.js作为前端框架的崛起;3、JS与Vue的互补关系;4、JS与Vue的实践应用。

See all articles