css指定图片加载顺序
大图片都加载出来了，一些很小的图标背景之类的却总是等到最后才加载。怎么指定图片加载顺序？另外一个，如果我在css里面多次写到background:url(pic/skin...
大图片都加载出来了，一些很小的图标背景之类的却总是等到最后才加载。怎么指定图片加载顺序？
另外一个，如果我在css里面多次写到background:url(pic/skin2.png) ;会不会出现多次请求？
我已经把需要优先加载的css代码写在靠前的位置，但是还是不行 展开
另外一个，如果我在css里面多次写到background:url(pic/skin2.png) ;会不会出现多次请求？
我已经把需要优先加载的css代码写在靠前的位置，但是还是不行 展开
4个回答
展开全部
CSS不能指定图片加载顺序，应该问的JS指定图片加载顺序。
javascript监听一个图片是否加载完毕 如果加载完成再加载下一张，不是一次性从服务器加载 减少服务器压力，
可用到的地方：比如制作类似google地图的应用，可以使小图一张一张的加载。
function Load_pic(arr){ //这里接受的图片的所以链接数组。
this.loop_f=function(i,o_file,len,f,obj){
if(i<len-1){
i=i+1;
f(i,o_file,len,obj);
}
};
this.creat_pic=function(i,o_file,len,obj){
var f=arguments.callee,
doc=document,
image = doc.createElement("img");
image.src =o_file[i];
i<len?doc.getElementsByTagName("body")[0].appendChild(image):'';
if(navigator.userAgent.indexOf("MSIE")>0){ //是IE浏览器
if($.browser.version==6.0 || $.browser.version==9.0){ //IE兼容处理。
image.onreadystatechange = function () {
if (image.readyState == "complete"){ //image 加载完后，函数回调。
obj.loop_f(i,o_file,len,f,obj);
}
};
}else{ //非IE7和IE9的IE浏览器。
ie7imagetime = window.setInterval(function(){
var rs = image.readyState;
if(rs=="complete"){
window.clearInterval(ie7imagetime);
obj.loop_f(i,o_file,len,f,obj);
}else{
return;
}
},200);
}
}else{ //非IE浏览器，直接用onload事件
image.onload = function () {
if (image.complete == true){
obj.loop_f(i,o_file,len,f,obj);
}
};
}
};
if(arr.constructor===Array){ //函数开始执行的地方。
var len=arr.length,
i=0;
i<len?this.creat_pic(i,arr,len,this):'';
};
}
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
页面图片加载的顺序大都是，页内img标签→背景图
如果你需要背景图优先加载的话，可以在head标签内写上js预加载，如：(new Image).src ="pic/skin2.png";
多次重复写的话，在某些浏览器中会出现多次请求，不利于页面性能，建议都写在一起；
本回答被网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
在页面内嵌CSS将主体隐藏,在CSS中定义样式将主体显示,这样CSS加载后就可应用到主体部分了.
<html>
<head>
<link rel="stylesheet" type="text/css" href="remote.css">
</head>
<body>
<img id="loading" src="loading.gif">
<div id="body" style="display:none;">
你的页面主体部分
</div>
</body>
</html>
remote.css
#loading {display: none!important;}
#body {display: block!important;}
<html>
<head>
<link rel="stylesheet" type="text/css" href="remote.css">
</head>
<body>
<img id="loading" src="loading.gif">
<div id="body" style="display:none;">
你的页面主体部分
</div>
</body>
</html>
remote.css
#loading {display: none!important;}
#body {display: block!important;}
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
指定加载顺序得用js实现，但是你图片要是太多的话也很麻烦，给你推荐个其他的方法吧
同学，你应该去看看CSS Sprites技术，就是把N多个小图片集合到一张大的图片上
然后根据图片的坐标选用你需要的图片作为背景显示出来
这样能够减少你的网站的HTTP请求数量，加快网页的加载的速度，不过也有一些缺点，但总的来说利大于弊，看你自己需求选择吧
资料可以看看百度百科的介绍
http://baike.baidu.com/view/3037553.htm
同学，你应该去看看CSS Sprites技术，就是把N多个小图片集合到一张大的图片上
然后根据图片的坐标选用你需要的图片作为背景显示出来
这样能够减少你的网站的HTTP请求数量，加快网页的加载的速度，不过也有一些缺点，但总的来说利大于弊，看你自己需求选择吧
资料可以看看百度百科的介绍
http://baike.baidu.com/view/3037553.htm
追问
我知道css精灵 但是总有些图片你是必须单独出来的。例如背景图片（xy重复）。
我只有2张图片要求优先加载，这两个图片加起来也就5k左右
追答
如果是那样的话，你可以把这几张图片单独提取出来，然后写在html <head>的<style>里，这样就可以按照顺序加载了，例：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>min-width</title>
<style>
.wrap {
background: url(images/1111111111.png);/*在style里边优先加载你需要的背景图片一系列*/
}
.aaa {
background: url(images/aaaaaaa.png);/*在style里边优先加载你需要的背景图片一系列*/
}
</style>
<link rel="stylesheet" href="1111.css">/*这里是你正常加载的css*/
<link rel="stylesheet" href="2222.css">/*这里是你正常加载的css*/
</head>
<body>
<p>
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
</p>
</body>
</html>
本回答被网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（2）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
