7种延迟加载javascript方法(转)

延迟加载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 属性(缺点是不能控制加载的顺序)

参考：

http://www.phpied.com/the-art-and-craft-of-postload-preloads/

http://www.stevesouders.com/blog/2009/04/27/loading-scripts-without-blocking/

转自：http://www.cnblogs.com/human/archive/2013/11/12/3419724.html

7种延迟加载javascript方法(转)相关推荐

三种引入JavaScript方法
三个简单JavaScript语句 1.弹窗:alert(); 2.网页控制台打印:console.log(); 3.页面body显示:document.write(); 引入JavaScript方法 ...
iframe异步加载_5种延迟加载图像的方法以帮助你提升网站性能与用户体验
英文 | https://www.sitepoint.com/five-techniques-lazy-load-images-website-performance/翻译 | web前端开发(ID: ...
JavaScript 假设你正在爬楼梯。需要 n 阶你才能到达楼顶。每次你可以爬 1 或 2 个台阶。你有多少种不同的方法可以爬到楼顶呢？
假设你正在爬楼梯.需要 n 阶你才能到达楼顶. 每次你可以爬 1 或 2 个台阶.你有多少种不同的方法可以爬到楼顶呢? 注意:给定 n 是一个正整数. 标签:动态规划本问题其实常规解法可以分成多个子 ...
节点插入--对比jQuery和JavaScript方法（一）
二.插入元素: 1 <div> 2 <p>面朝大海,春暖花开</p> 3 </div> (一).jQuery方法 1.在节点内部插入: 方法说明 ap ...
admui 能再php上用吗,Javascript 方法
Javascript 方法主题结构主要分为以下模块: /src/themes/(布局名)/js/ └── site.js (布局模块) /src/themes/global/js/ ├── com ...
转：javascript方法--bind()
javascript方法--bind() bind方法,顾名思义,就是绑定的意思,到底是怎么绑定然后怎么用呢,下面就来说说我对这个方法的理解. 语法 fun.bind(this,arg1,arg2,. ...
请求时才延迟加载JavaScript文件 - 优化篇
技术关键词 · 收集: 阻塞浏览器.并行下载.竞态条件.关联函数(关联JavaScript代码).非阻塞请求.动态创建<script>标签.异步下载.延时加载代码实例: 下面我们先看一段 ...
判断是否为数组的 JavaScript 方法总结
前言我们在日常开发中,常常有判断某值类型需求,今天我们总结一下常见的几种用来判断是否为数组的 JavaScript 方法. Array.isArray Array.isArray() 是ES5新增的 ...
matlab 遍历每个像素点,Mat中两种像素遍历方法比较
小白,入门中,不足其指正.刚刚接触opencv,从一个Matlab风格的编程环境突然跳转到C++,实在有些不适.单就pixels scanning花了好长时间研究.opencv-tutorials给出 ...

7种延迟加载javascript方法(转)

7种延迟加载javascript方法(转)相关推荐

最新文章

热门文章