Question

使用浏览器访问网页时，浏览器总是先加载img 标签里的图片，加载完了才加载 css 里面的图片 。。

能否让css 里的图片 优先加载？

Answer 1

额，CSS里面背景图片的加载，跟CSS代码放在哪里没有关系，它主要跟HTML中是否应用到这个定义有关，如果没有标签符合相应的选择器，根本不会加载css中的图片。

至于想要预加载css中的图片的话，可以用js操作一下，我下面的样例是加载所有的当前页面中style标签中出现的背景图。

var cssStr = document.getElementsByTagName('style');
for (var i = 0; i < cssStr.length; i++) {
    var t = cssStr[i].innerHTML.match( /http:.*?[")]/g ) ;
    for (var i = 0; i < t.length; i++) {
        var src = t[i].substring(0,t[i].length-1);
        new Image().src = src;
    };
};

优先加载恐怕难以实现，因为dom结构中的img只要写了正确的src就发送请求获取资源去了。

追问

“如果没有标签符合相应的选择器，根本不会加载css中的图片” 这句话的意思是：如果 css 样式如果定义在 tag上 而不是定义在class 或 id 上，不管是内嵌 还是外连 的css , 就会加载css 中的图片么？

您上面写的 js 是应用style 标记，如果使用link 引用外部css 呢？

追答

css样式表根据代码位置定义分为： 行内样式表(标签的style属性)、内联样式表(style标签内部css代码) 以及外联样式表(link：href)。

CSS选择器包括： 标签选择器、类选择器、id选择器、组合选择器、伪类选择器、伪标签选择器、关联选择器等等。 只有兼容性和权重的差别，标签选择器也是CSS选择器。

如果使用外部css样式表，不建议预加载。

追问

不知能否在js 加载 或 解析 前 加载 css 背景图片。

追答

还是用上面代码的方法啊，只要new Image().src = “”， 就能发起请求，页面中再一次使用相关图片的时候就可以从缓存中获取了。

Answer 2

你的css文件是否放在head里，如果是这里css就会先加载，这样css里的背景图应该也会先加载进来。