我正在使用imageSlider,我已经使用了div并设置了div的背景图像。在页面加载背景页面上需要大量时间来加载图像。有没有办法在缓存中加载所有背景图像,一旦加载,我可以显示主要的Div ..
我正在阅读xml文件,然后逐个设置div的背景图像。
$('#myImageFlow').append('<div id="id'+k+'" alt="div'+k+'" class="sliderImage" width="280" height="310" style="visibility:hidden"> <div class="ffrontText" id="ff'+k+'">'+frontDiv[k]+'</div><div class="borderdiv" id="b'+k+'"></div><div class="borderdiv1" id="bd'+k+'"></div><div class="reflection" id="ref'+k+'"></div> <div class="overlay" id="o'+k+'"></div></div>');
任何建议。
答案 0 :(得分:0)
您可以使用两个参数(图像源数组和回调)创建一个函数,并在加载所有图像后调用回调函数。
示例:
preload_images = function(images, callback) {
var images_count = images.length;
var loaded_count = 0;
$.each(images, function(index, src) {
var image = $('<img src="' + src + '">');
image.load(function() {
loaded_count++;
if (loaded_count == images_count && callback) {
callback();
}
});
});
}
preload_images(['1.jpg', '2.jpg', '3.jpg'], function() { // pass background images in array
console.log('background images preloaded');
// Show main div
});