0

我想创建一个预加载器，它会在显示网站之前下载所有图像，但后来我需要切换<img>到 CSS 样式的ul-s 并且之后它停止工作 - 浏览器不会等待图像加载。

HTML：

<head>
[...]
<ul id="imgPreLoader">
            <li></li>
            <li></li>
            <li></li>
            <li></li>
</ul>
[...]
</head>

CSS：

#imgPreLoader {
display:none;
}

#imgPreLoader li:nth-child(1) {
background-image: url('...');
}

#imgPreLoader li:nth-child(2) {
background-image: url('...');

}

#imgPreLoader li:nth-child(3) {
background-image: url('...');

}

#imgPreLoader li:nth-child(4) {
background-image: url('...');

}
4

2 回答 2

0

这可能是因为您设置了display:none. 我认为如果 display 是 none，许多浏览器将不会加载背景图像，即使它们会加载未显示的 img 元素的源。

而不是设置display:none，尝试这样的事情：

#imgPreLoader {
   visibility:hidden;
   position:fixed;
}

这应该完成同样的事情，因为它会阻止元素显示和影响布局，但它应该强制浏览器加载背景图像。

于 2013-08-26T13:52:23.887 回答
0

我只能推测：
a）您的 <li> 元素没有关联的非零区域，可以在其中展开背景图像
b）您将一些必要的事件处理代码绑定到 <img>，而不是 <li> 元素
等等

于 2013-08-26T13:56:00.093 回答