快捷搜索:

css,javascript 的预加载

为了前进网站的加载速率,有一个很紧张的手段便是在用户浏览历程中的上游网站做一个文件的预加载。预加载文件一样平常有两种常用的要领:xhr和动态插入节点的要领。动态插入节点是最为简单也最为广泛的一种异步加载要领(例如yui的Get模块),然后应用动态插入节点措施加载的文件都邑在加载后急速履行,javascript的履行一方面会占用浏览器js履行进程,另一方面也可能改变页面布局,而css的履行更有可能让全部页面变更。xhr要领虽然不会履行脚本,然则因为同域的限定,且如今网站的静态文件都是支配在cdn办事器上,若何预加载css js文件也变有点微妙了。

Stoyan Stefanov 撰文简明的阐述了一种加载文件而不会让之履行的措施。原文可见http://www.phpied.com/preload-cssjavascript-without-execution/

详细的措施是,ie中应用new Image().src 去预加载文件,而其他浏览器应用动态插入的标签来完成加载。

部分代码如下

1 window.onload = function () {

2

3var i = 0,

4max = 0,

5o = null,

6

7// list of stuff to preload

8preload = [

9'http://tools.w3clubs.com/pagr2/.sleep.expires.png',

10'http://tools.w3clubs.com/pagr2/.sleep.expires.js',

11'http://tools.w3clubs.com/pagr2/.sleep.expires.css'

12],

13isIE = navigator.appName.indexOf('Microsoft') === 0;

14

15for (i = 0, max = preload.length; imax; i += 1) {

16

17if (isIE) {

18new Image().src = preload[i];

19continue;

20}

21o = document.createElement('object');

22o.data = preload[i];

23

24// IE stuff, otherwise 0x0 is OK

25//o.width = 1;

26//o.height = 1;

27//o.style.visibility = "hidden";

28//o.type = "text/plain"; // IE

29o.width= 0;

30o.height = 0;

31

32// only FF appends to the head

33// all others require body

34document.body.appendChild(o);

35}

36

37 };

38

您可能还会对下面的文章感兴趣: