我现在有一个设施列表,每个设施都有一个image
属性,它只是它的图像文件名。例如,facility.image == 'YogisBarAndGrill'
。在页面加载时,通过JSON发送了一组字符串(图像名称),并尝试在显示页面和/或文本之前加载所有图像。
不幸的是,我的所有努力都没有成功预加载图像。目前,在document.ready()
之前执行以下操作:
(function() {
var imagesPath, serviceURL, urlSegs;
urlSegs = window.location.pathname.split("/");
serviceURL = imagesPath = '';
if (urlSegs.length === 2) {
serviceURL = urlSegs[1] + '_images';
imagesPath = urlSegs[1] === 'places' ? 'images/logos/' : 'images/categories/';
$.getJSON(serviceURL, function(imageNames) {
var i, _results;
_results = [];
for (i in imageNames) {
if (i < imageNames.length) {
_results.push((new Image()).src = imagesPath + imageNames[i] + '.png');
}
}
return _results;
});
}
}).call(this);
每个列表图像的css如下所示:
background-image: url('images/logos/YogisBarAndGrill.png')
或类似内容。无论如何 - 我上面发布的不起作用。没有预加载。我想要实现的是所有图像一次性显示,或者更好的是在所有图像加载完成之前不显示页面。
谢谢任何帮助!