延迟一定的CSS背景图像

的加载在这样的CSS：延迟一定的CSS背景图像

... 
#big-menu { 
    background: #fff url(../images/big-menu.jpg) no-repeat; 
} 
#some-menu { 
    background: #fff url(../images/some-menu.jpg) no-repeat; 
} 
#some-other-menu { 
    background: #fff url(../images/some-other-menu.jpg) no-repeat; 
} 
...

是有延迟#big-menu的背景图像的加载方式，因此它后一切加载，包括所有HTML中的图像，以及其他所有CSS背景（some-menu和some-other-menu）。

原因是，big-menu.jpg的尺寸很重，我希望它最后加载。毕竟，它只是作为一个眼睛的糖果，还有其他背景图片比这更好用。（例如按钮中使用的那些）

将它放入CSS中的顺序或HTML中标记（#big-menu）的出现顺序是否与首先被加载的内容有关？还是有更可靠的方法来控制它？ JavaScript（jQuery首选）很好。

来源

2009-02-03 andyk

嗨，安迪！ – alex 2009-06-02 00:55:11

在CSS中的顺序不控制哪些资源首先被加载，但确实会影响现有样式被覆盖或继承。

尝试JavaScript onload事件。该事件仅在页面加载完成后才执行。

function loadBG(){ 
    document.getElementById("big-menu").style.backgroundImage="url(../images/big-menu.jpg)"; 
} 
window.onload=loadBG();

来源

2009-02-03 06:33:21 Jason

当这个函数被调用时，所有的图像和所有其他背景图像会完成加载吗？ onload事件AFAIK在HTML而不是图像完成加载时触发。 – andyk 2009-02-03 07:14:16

当页面上的所有资源都已完成编码时（包括图像和iframe以及css文件和JavaScript文件），会触发onload事件。 – 2009-02-03 14:37:36

@Pim谢谢澄清。 – andyk 2009-02-03 19:42:44

控制一个图像加载到CSS中是不可能的。你可以尝试把它放在你的StyleSheet的最底部，但我怀疑你会看到改进。

来源

2009-02-03 12:10:12 James

我不认为放置在styelsheet会影响它，因为它们被应用到的元素的顺序将决定首先加载哪个图像。

您可以使用jQuery加载图像以正确的顺序，虽然

$('firstElement').addClass('some-menu'); 
$('secondElement').addClass('some-other-menu'); 
$('lastElement').addClass('big-menu');

编辑： 好吧，那么也许不是添加类，一个更好的解决办法是添加背景-images在运行时。

$('firstElement').css("background-image", "some-menu.jpg"); 
$('secondElement').css("background-image", "some-other-menu.jpg"); 
$('lastElement').css("background-image", "big-menu.jpg");

来源

2009-02-03 14:15:55 peirix

即使在实际布局中未使用它们，在样式表中引用的图像也会遇到该线。添加课程只会在显示时延迟。 – 2009-02-04 04:21:55

这可能不是一个完美的解决方案（因为它是一个CSS的背景，而不是图像），但YUI Image loader提供延迟加载图像的好方法。

创建组

var imgGroup = new YAHOO.util.ImageLoader.group(window, 'load', 2);

文档加载之后，它后图像将加载2秒。演示请参阅Yahoo! Shine或examples。

来源

2009-02-03 14:34:05 Alagu

另请参阅此链接，了解相当于jQuery的：http://www.appelsiini.net/projects/lazyload – 2009-02-04 04:22:45

另一种解决方案是将您的资产分割到不同的域中，浏览器只会在请求时请求两个资源，然后等待下一个资源开始下一个加载。你可以用Firebug和YSlow来观察，因此在images.example.com和images1.example.com上放置一些资源，看看是否会产生影响

来源

2009-02-05 08:06:59 Tom

下载的顺序不能通过使用css来控制。但是，您可以使用JavaScript来实现这一点。

虽然没有直接相关的问题，也许在做之前，你应该优化使用smush图像。它或你最喜欢的图像程序，我发现JPEG保存在85％的质量非常好。试验一下，不要忘记将您的网络服务器设置为长时间缓存图片，然后问题将只是您的用户第一次访问该网站。

来源

2009-06-02 00:51:16

贾森的Javascript技巧为我解决这个问题。但是，我不得不稍微纠正语法：

function loadBG(){ 
    document.getElementById("big-menu").style.backgroundImage="url(../images/big-menu.jpg)"; 
} 
window.onload=loadBG();

来源

2012-01-09 14:39:57

延迟一定的CSS背景图像

回答

相关问题