7种js延时加载执行的方法

最新推荐文章于 2024-08-30 08:45:00 发布
最新推荐文章于 2024-08-30 08:45:00 发布
阅读量5.5k 收藏 2
点赞数
分类专栏： 前端

 延迟加载javascript，也就是页面加载完成之后再加载javascript，也叫on demand（按需）加载，一般有一下几个方法：

1. DOM
head append script tag
 
window.onload = function() {  
    setTimeout(function(){  
  
        // reference to <head>  
        var head = document.getElementsByTagName('head')[0];  
  
        // a new CSS  
        var css = document.createElement('link');  
        css.type = "text/css";  
        css.rel = "stylesheet";  
        css.href = "new.css";  
  
        // a new JS  
        var js = document.createElement("script");  
        js.type = "text/javascript";  
        js.src = "new.js";  
  
        // preload JS and CSS  
        head.appendChild(css);  
        head.appendChild(js);  
  
        // preload image  
        new Image().src = "new.png";  
  
    }, 1000);  
};  
 
2. document.write

<script language="javascript" type="text/javascript">  
        function include(script_filename) {  
            document.write('<' + 'script');  
            document.write(' language="javascript"');  
            document.write(' type="text/javascript"');  
            document.write(' src="' + script_filename + '">');  
            document.write('</' + 'script' + '>');  
        }  
  
        var which_script = '1.js';  
        include(which_script);  
        </script>  
 
3. Iframe
和第一种类似，但是script tag是放到iframe的document里面。
 
window.onload = function() {  
    setTimeout(function(){  
  
        // create new iframe  
        var iframe = document.createElement('iframe');  
        iframe.setAttribute("width", "0");  
        iframe.setAttribute("height", "0");  
        iframe.setAttribute("frameborder", "0");  
        iframe.setAttribute("name", "preload");  
        iframe.id = "preload";  
        iframe.src = "about:blank";  
        document.body.appendChild(iframe);  
  
        // gymnastics to get reference to the iframe document  
        iframe = document.all ? document.all.preload.contentWindow : window.frames.preload;  
        var doc = iframe.document;  
        doc.open(); doc.writeln("<html><body></body></html>"); doc.close();   
  
        // create CSS  
        var css = doc.createElement('link');  
        css.type = "text/css";  
        css.rel = "stylesheet";  
        css.href = "new.css";  
  
        // create JS  
        var js = doc.createElement("script");  
        js.type = "text/javascript";  
        js.src = "new.js";  
  
        // preload CSS and JS  
        doc.body.appendChild(css);  
        doc.body.appendChild(js);  
  
        // preload IMG  
        new Image().src = "new.png";  
  
    }, 1000);  
};  
 
4. Iframe static page
直接把需要加载东西放到另一个页面中
 
window.onload = function() {  
    setTimeout(function(){  
  
        // create a new frame and point to the URL of the static  
        // page that has all components to preload  
        var iframe = document.createElement('iframe');  
        iframe.setAttribute("width", "0");  
        iframe.setAttribute("height", "0");  
        iframe.setAttribute("frameborder", "0");  
        iframe.src = "preloader.html";  
        document.body.appendChild(iframe);  
  
    }, 1000);  
};  
 
5. Ajax eval
用ajax 下载代码，然后用eval执行
 
6. Ajax Injection
用ajax下载代码，建立一个空的script tag，设置text属性为下载的代码
 
7. async 属性(缺点是不能控制加载的顺序)
<script src="" async="true"/>


感谢原著作者，谢谢
trytoit
关注
专栏目录
JavaScript技巧：延迟执行事件的解析
ByteZenith的博客
09-30 467
在JavaScript中，我们经常需要控制事件的执行时间，有时候我们希望在一定的延迟之后再执行某个事件。本文将介绍一种常用的技巧，即通过延迟执行函数来实现事件的延迟执行。函数接受两个参数，第一个参数是要执行的代码块，可以是一个函数或一段代码字符串；延迟执行事件是JavaScript中常用的技巧之一，它可以帮助我们控制代码的执行时间，实现更好的用户体验。函数还返回一个数值类型的定时器标识符，可以使用该标识符来取消延迟执行。函数，我们可以在指定的延迟时间后执行代码块，从而实现事件的延迟执行。
javascript延时执行跳转或执行函数
07-12
延时执行跳转或执行函数 url可以为地址或者定义好的javascript/jquery函数, 定义每次延时时间和延时次数, callback是每次延时可以执行的回调函数
js代码延迟一定时间后执行一个函数的实例
10-20
下面小编就为大家带来一篇js代码延迟一定时间后执行一个函数的实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
JS | setTimeout 延时器详解
最新发布
青春木鱼的博客
08-30 1240
settimeout的特点是，它只执行一次，如果想要再次执行，需要重新调用settimeout。另外，settimeout的延迟时间并不是准确的，它只是表示最早可能执行的时间，实际执行的时间可能会受到其他代码的影响，比如浏览器的事件循环，或者其他的定时器。settimeout和setinterval的区别如下：settimeout只执行一次，而setinterval会不断重复执行，直到被清除。settimeout和setinterval的延迟时间和执行间隔都不是准确的，它们会受到其他代码和浏览器的影响
JavaScript：延迟访问和延时执行函数
晓风残月淡的博客
09-25 5413
场景：由于js是单线程异步执行的，当调用第三方API接口时，如果对方没有提供批量操作的接口，我们就需要多次请求相同的API，但是在for语句中会同时去访问多个相同请求，会造成并发冲突。同时，由于setTimeout函数的作用域不能访问外部函数，需要通过匿名函数传递外部参数进去。单纯使用setTimeout函数，最后发现延迟1s后还是一起执行了内部函数，造成冲突。唯一有的就是setTimeout延迟执行函数，但是这个函数也是有很多坑。思路是每个setTimeout函数延迟不同的时间1000 * i。
js延迟执行函数
牧人
04-12 1万+
在js中，延迟执行函数有两种：setTimeout和setInterval setTimeout("test()","2000"); //2000毫秒后执行test()函数，只执行一次。 setInterval("test()","2000"); //每隔2000毫秒执行一次test()函数，执行无数次。 var interval = window.setInterval("test()","2000"); window.clearInterval(interval); //停止执行setInte
延时执行JavaScript代码
DevGlider的博客
09-22 3745
在上面的例子中，我们传递了一个匿名函数作为第一个参数，这个函数包含了我们要延时执行的代码。函数接受两个参数：要执行的代码块以及延时的时间（以毫秒为单位）。延时执行代码在很多场景中都非常有用，比如在网页加载完成后执行某些操作、创建动画效果或者实现用户交互等。你可以根据需要调整延时的时间，例如如果你希望延时5秒执行，可以将第二个参数改为5000。另外，如果你想要在延时执行的代码中传递参数，可以在匿名函数中使用参数。，然后在延时执行的代码块中可以使用这些参数。在上面的例子中，我们通过在。函数来延时执行一段代码。
js实现延迟加载的几种方法详解
10-17
本文将详细解析三种常用的JavaScript延迟加载方法。 1. **`defer`属性** `defer`属性适用于外部JavaScript文件。当`defer`属性被设置时，浏览器会并行下载所有带`defer`属性的脚本，但不会阻塞DOM解析。这些脚本会...
js实现延迟加载的方法
12-03
JavaScript中的延迟加载是一种优化网页性能的技术，它允许开发者在页面加载初期不立即执行某些操作，而是等到用户交互或特定条件满足时才进行。这有助于减少初始加载时间，提高用户体验，特别是对于大型应用或者图片...
js实现延迟加载的几种方法
10-19
以下是介绍的三种JavaScript延迟加载方法： 1. **使用`setTimeout`延迟执行** `setTimeout`函数可以用来延后执行一段代码。在示例中，`setTimeout`被用来在一秒钟后调用函数`A`。这样，当页面加载时，JavaScript...
javascript实现iframe框架延时加载的方法
10-25
标题中提到的知识点为“JavaScript实现iframe框架延时加载的方法”，说明本文将要讲述的是如何在Web开发中使用JavaScript技术，特别是利用iframe标签来实现内容的延时加载。所谓延时加载，就是指在网页加载过程中，...
JavaScript中的延迟执行语句
2301_79326254的博客
09-27 569
延迟执行语句是JavaScript中一种非常有用的编程技术，它允许我们在指定的时间间隔之后执行代码块。setInterval函数也可以用于延迟执行代码块，但与setTimeout函数不同，它会在指定的时间间隔内重复执行代码块。延迟执行语句允许我们在指定的时间间隔之后执行特定的代码块。在上面的示例中，传递给setTimeout函数的第一个参数是一个匿名函数，它包含要在延迟之后执行的代码块。在上面的示例中，传递给setInterval函数的第一个参数是一个匿名函数，它包含要重复执行的代码块。
js 延时执行
fei0700的博客
06-19 808
for(var i = 0; i < 3; i++) { (function(i) { setTimeout(function() { console.log(i); }, (i + 1) * 1000); })(i) }
js 延期执行_如何用javascript设置延时执行
热门推荐
weixin_39710594的博客
01-14 1万+
152 **** ****如何用javascript设置延时执行一、什么叫做JavaScript 的计时事件使用JavaScript可以实现代码的延时执行，也就是说当一个函数被调用时不立即执行某些代码，而是等一段指定的时间后再执行，这就叫做计时事件。二、JavaScript 的计时事件的函数setTimeout() - 在指定时间后执行代码clearTimeout() - 取消 setTimeou...
js实现延迟执行规范写法
HouYing
10-09 359
【代码】js实现延迟执行规范写法。
JS关于链式调用和延迟执行实现思路
Android、HTML、CSS、JS、JAVA、Kotlin、PHP等技术
08-07 237
【代码】JS关于链式调用和延迟执行实现思路。
js 延时执行代码的最佳实践 —— 自定义 sleep 函数
朝阳39的博客
05-23 392
可见 setTimeout 是 js 的一种异步机制，它并不会阻塞同步代码的执行，具体的执行机制，详见 js【深度解析】代码的执行顺序。setTimeout 仅适用于简单的、一次性延迟，若需要实现串行延时，还需要使用递增时长来实现（需自行计算累计时长，逻辑不够直观）这是最传统的实现 sleep 的方法，确实实现了延时，但会阻塞整个线程，可能会冻结UI或导致程序崩溃，js 延时执行代码的第一想法是使用 setTimeout，但它的效果可能和你想的不一样。附赠 print 的代码。
js防抖——延时与计时执行
xuelong的博客
08-07 172
在触发事件后立即执行一次处理函数，然后在指定的时间间隔内忽略后续的触发。只有在指定时间间隔过去后再次触发事件，处理函数才会被执行。
js延迟1秒钟 同步执行
weixin_42600128的博客
01-14 7730
可以使用 JavaScript 中的 setTimeout() 函数来延迟 1 秒钟执行代码。示例： setTimeout(function() { console.log("延迟 1 秒钟执行的代码"); }, 1000); 其中，第一个参数是要执行的函数，第二个参数是延迟的时间(单位为毫秒)。 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值