当前位置：首页 - 正文

js延迟加载的方式有哪些

发布网友发布时间：2022-04-22 04:53

我来回答

共2个回答

懂视网时间：2022-05-14 20:33

本篇文章给大家带来的内容是关于js实现延迟加载有几种方式？js延迟加载的六种方式介绍，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

JS延迟加载，也就是等页面加载完成之后再加载 JavaScript 文件。
JS延迟加载有助于提高页面加载速度。
一般的几种方法如下：

defer 属性
async 属性
动态创建DOM方式
使用jQuery的getScript方法
使用setTimeout延迟方法
让JS最后加载

1、defer属性
HTML 4.01 为 <script>标签定义了 defer属性。
用途：表明脚本在执行时不会影响页面的构造。也就是说，脚本会被延迟到整个页面都解析完毕之后再执行。

在<script> 元素中设置 defer 属性，等于告诉浏览器立即下载，但延迟执行。

<!DOCTYPE html>
<html>
<head>
 <script src="test1.js" defer="defer"></script>
 <script src="test2.js" defer="defer"></script>
</head>
<body>
<!-- 这里放内容 -->
</body>
</html>

说明：虽然<script> 元素放在了<head>元素中，但包含的脚本将延迟浏览器遇到</html>标签后再执行。

HTML5规范要求脚本按照它们出现的先后顺序执行。在现实当中，延迟脚本并不一定会按照顺序执行。

defer属性只适用于外部脚本文件。支持 HTML5 的实现会忽略嵌入脚本设置的 defer属性。

2、async属性

HTML5 为 <script>标签定义了 async属性。与defer属性类似，都用于改变处理脚本的行为。同样，只适用于外部脚本文件。
目的：不让页面等待脚本下载和执行，从而异步加载页面其他内容。

异步脚本一定会在页面 load 事件前执行。
不能保证脚本会按顺序执行。

<!DOCTYPE html>
<html>
<head>
 <script src="test1.js" async></script>
 <script src="test2.js" async></script>
</head>
<body>
<!-- 这里放内容 -->
</body>
</html>

async和defer一样，都不会阻塞其他资源下载，所以不会影响页面的加载。
缺点：不能控制加载的顺序

3、动态创建DOM方式

//这些代码应被放置在</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",downloadJAAtOnload); 
 else
 window.onload = downloadJSAtload;</script>

4.使用jQuery的getScript()方法

$.getScript("outer.js",function(){ 
//回调函数，成功获取文件后执行的函数
 console.log("脚本加载完成")
});

5.使用setTimeout延迟方法

6.让JS最后加载

热心网友时间：2022-05-14 17:41

使用setTimeout延迟方法的加载时间
延迟加载js代码，给网页加载留出更多时间
<script type="text/javascript" >
function A(){
$.post("/lord/login",{name:username,pwd:password},function(){
alert("Hello");
});
}
$(function (){
setTimeout('A()', 1000); //延迟1秒
})
</script>

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

可以同时使用 async 和 defer，这样IE 4之后的所有IE 都支持异步加载。3.动态创建DOM方式 (使用的最多) function downloadJSAtOnload() { var element = document.createElement("script"); element.src = "defer.js";

几种延迟加载JS代码的方法加快网页的访问速度

这样通过延迟加载js代码，给网页加载留出更多的时间！2、js最后加载方案一在需要插入JS的地方插入以下代码:程序代码复制代码代码如下:LOADING… 当然,那个LOADING…你可以换成自己喜欢的小图片.看起来很有AJAX效果呢.然后在页面最底端插入:程序代码复制代码代码如下:你的JS代码在这里! L4EVER.inner...

异步加载和延迟加载怎么看出来啊?

异步加载也叫非阻塞模式加载，浏览器在下载js的同时，同时还会执行后续的页面处理。在script标签内，用js创建一个script元素并插入到document中，这种就是异步加载js文件了。同步加载流程是瀑布模型，异步加载流程是并发模型。三、延迟加载（lazy loading）前面解决了异步加载（async loading）问题，再谈谈什么...

javascript图片预加载和延时加载的区别

预加载：就是页面打开，图片什么的都加载好了（优先显示图片）延迟加载：优先显示别的，等别的显示完了，再加载图片（优先显示其他东西）各有所需，看你的用户需要优先看什么。

vue延迟加载dom

使用生命周期函数来实现。Vue.js延迟加载DOM元素可以通过使用Vue.js的生命周期函数来实现。

js卡的含义是什么意思

JS卡的解决方法有很多，最常见的是对程序代码进行优化和压缩，减少代码的复杂度和冗余。此外，也可以采用异步加载方式来优化JS代码的性能，这可以通过使用异步模块定义（AMD）和RequireJS等工具实现。另外，也可以采用浏览器缓存和CDN加速等技术来提高JS卡的解决效果。JS卡的可能原因有很多，例如网络延迟、...

怎么让html里的js脚本延迟5秒运行?

通过setTimeout函数调用。如下：setTimeout( function(){//add your code}, 5 * 1000 );//延迟5000毫米 setTimeout() 的第一个参数是含有 JavaScript 语句的字符串。这个语句可能诸如 "alert('5 seconds!')"，或者对函数的调用，诸如 alertMsg()"。第二个参数指示从当前起多少毫秒后执行第一个...

javascript如何解决异步加载实现方式总结

(1) defer，只支持IE defer属性的定义和用法defer 属性规定是否对脚本执行进行延迟，直到页面加载为止。有的 javascript 脚本 document.write 方法来创建当前的文档内容，其他脚本就不一定是了。如果您的脚本不会改变文档的内容，可将 defer 属性加入到标签中，以便加快处理文档的速度。因为浏览器知道...

body里面用到头部js文件里的方法时,怎么让他延迟执行。

type里的代码，如果方法里是document.write的话，可以替换成document.getElementById("test").innerHTML="你要加载的内容";如果是图片就简单不用div，可以用最后调用document.getElementById("test").src="方法里的图片地址"

Web前端岗位面试题有哪些

20、Javascript中,有一个函数,执行时对象查找时,永远不会去查找原型,这个函数是?21、对JSON的了解?22、[].forEach.call($$("*"),function(a){ a.style.outline="1px solid #"+(~~(Math.random()*(1<<24))).toString(16) }) 能解释一下这段代码的意思吗?23、js延迟加载的方式有哪些?24、Ajax ...

js中如何延迟加载 js延迟执行 js 延时 js实现加载等待效果 js延时代码延时调用reload set怎么遍历 js数组遍历方法 html5新特性

声明：本网页内容为用户发布，旨在传播知识，不代表本网认同其观点，若有侵权等问题请及时与本网联系，我们将在第一时间删除处理。
E-MAIL:11247931@qq.com

焦点

js延迟加载的方式有哪些

最新推荐

猜你喜欢

热门推荐