网页图片加载顺序

当头部应用外置css文件时

在body中的A,B,C,D 4个DIV 分别引用4个img 背景图片

4个DIV后有1个img标签，SRC指向为和4个IMG 背景图片在同一个文件夹内

加载顺序为IMG 图片最先加载，4个DIV的背景图片稍后加载，并且是并行下载

<div id="a"></div>
<div id="b"></div>
<div id="c"></div>
<div id="d"></div>
<img src="icon.png" />

如上

如果要让背景图片比img图片先加载

一个办法是利用JS在body后，在背景图片加载前，创建几个img标签，SRC为背景图片

后面的背景图片就会加载这几个img标签的缓存

代码如下

function appendImg() {
    var bodya = document.getElementsByTagName("body")[0];
    var refChild = document.getElementsByTagName("div")[0];
    var content = document.createElement("div");
    content.id = "preloadImg";
    var string=['a','b','c','d'];
    for (var j = 0; j < 4; j++) {
       var img = document.createElement("img");
       img.src = "img/" + string[j] + ".png";
       img.alt = "none";
       content.appendChild(img);
    }
bodya.insertBefore(content, refChild);
}

　　

 

页面的加载顺序为 HTML=JS>CSS>IMG

JS阻塞

当JS在页面或则是HEAD引用JS时，假如JS中有大量的代码，可能会引起JS阻塞，阻塞了HTML和CSS,IMG的下载，导致在JS执行完毕前页面上什么内容都没有

如这样一段代码，用来阻塞页面加载的

function delay() {
var n1 = new Date();
var n2 = new Date();
while (n2 - n1 < 5000) {
n2 = new Date();
}
}

这段代码执行时间为5秒，在5秒内，页面是完全的空白，没有任何内容