Как сделать загрузку изображения плавной в Safari и Chrome

Мне нужно изменить фоновое изображение на 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});
        }
    });
});

Заранее спасибо.