Мне нужно изменить фоновое изображение на hover, я предварительно загружаю изображения через Javascript на готовый документ. Теперь он работает в Firefox, но в Chrome и Safari требуется время для загрузки. Так есть ли способ, чтобы я мог сделать его гладким, как Firefox? Кроме того, изображения имеют размерность приблизительно в Mbs.
Это то, что я сделал для предварительной загрузки и изменения изображения при наведении
$( document ).ready(function() {
// Set Default home page background
if(defaultBGimage != "" && defaultBGimage != null && typeof(defaultBGimage) != "undefined"){
$.backstretch(defaultBGimage, {centeredY: false});
}
// Pre-load images
function preloadImages(srcs) {
if (!preloadImages.cache) {
preloadImages.cache = [];
}
var img;
for (var i = 0; i < srcs.length; i++) {
img = new Image();
img.src = srcs[i];
preloadImages.cache.push(img);
}
}
preloadImages(catBGimages); // Pass array of images to preload it
jQuery(".level1-cat").hover(function(){ // on hover change home page background image
if(catBGimages[jQuery(this).data('id')] != null && catBGimages[jQuery(this).data('id')] != "null" && catBGimages[jQuery(this).data('id')] != "" && typeof(catBGimages[jQuery(this).data('id')]) != "undefined"){
$.backstretch(catBGimages[jQuery(this).data('id')], {centeredY: false});
}
});
});
Заранее спасибо.
Ниже приведен код, который делает предварительные изображения быстрой попыткой, это может помочь вам.
function preload(arrayOfImages) {
$(arrayOfImages).each(function(){
$('<img/>')[0].src = this;
// Alternatively you could use:
// (new Image()).src = this;
});
}
// Usage:
preload([
'img/imageName.jpg',
'img/anotherOne.jpg',
'img/blahblahblah.jpg'
]);