基于CSS的图像预加载器不起作用 [英] CSS based image preloader doesn't work
问题描述
我想创建一个预加载器，可以在显示网站之前下载所有图像，但是后来我需要从<img>切换为CSS样式的ul -s，然后它停止工作-浏览器不等待以便加载图像.
I wanted to create a preloader which would download all images before showing the website, but later I needed to switch from <img> to CSS-styled ul-s and after that it stopped working - browser doesn't wait for images to load.
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('...');
}
推荐答案
这可能是因为您设置了display:none.我认为，即使没有显示，许多浏览器也不会加载背景图片，即使它们会加载未显示的img元素的来源.
This could be because you have set display:none. I think many browsers will not load the background image if display is none even though they will load the source of a non-displayed img element.
尝试设置类似以下内容的方法，而不是设置display:none:
Instead of setting display:none, try something like this:
#imgPreLoader {
visibility:hidden;
position:fixed;
}
这应该实现相同的目的，因为这将防止元素显示和影响布局，但应强制浏览器加载背景图像.
This should accomplish the same thing in that it will prevent the elements from displaying and affecting the layout, but it should force the browser to load the background images.
这篇关于基于CSS的图像预加载器不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
