JavaScript - Предварительная загрузка изображений

Question

Я работаю над фотогалереей, и мне хотелось бы иметь представление перед загрузчиком gif перед загрузкой основного изображения, а затем показать основное изображение.

Итак, это то, что я получил:

У меня есть #photo_place, который является DIV, который содержит основную фотографию. Это изменяется в зависимости от того, какой эскиз пользователь выбирает. Когда пользователь делает выбор миниатюры, эта функция вызывается:

function gallery(icon){ 

    $('#photo_place').css('background-image','url("../images/'+icon+'.png")'); 

} 

Теперь, что я хочу, это первый, показать прелоадер GIF на #photo_place, нагрузку в выбранном изображении ... где-то, и когда это изображение загружено, замените предварительный загрузчик основным изображением.

Возможно, что-то вроде этого?

function gallery(icon){ 
    $('#photo_place').css('background-image','url("../images/preloader.gif")'); 
    load.in.image'images/'+icon+'.png'; 

    if(load.in.image == true){ 
     $('#photo_place').css('background-image','url("loaded image")'); 
    } 
} 

Конечно, это был не настоящий JS, но что-то подобное должно работать правильно?

Любые идеи?

Thanks

Answer 1

Возможно, вы ищете что-то вроде этого?

function gallery(icon) { 
    var preLoader = '../images/preloader.gif'; 
    var imagePath = '../images/' + icon + '.png'; 

    $('#photo_place').css('background-image','url("../images/preloader.gif")'); 

    var image = new Image(); 

    image.onload = function() { 
     $('#photo_place').css('background-image', imagePath); 
    } 
    image.src = imagePath; 
} 

Также фотографии ссылка класс Image: http://www.javascriptkit.com/jsref/image.shtml