убедитесь, что изображение загружено при динамическом изменении jquery

Question

Я меняю изображение src узла изображения. Я хочу, чтобы убедиться, что он был изменен перед выполнением somecode. Как я могу это сделать?

прямо сейчас у меня есть

function changePic(imgNode, newPic, desc){ 
    var descNode = $("#description"); 
    $(imgnode).fadeTo(500, 0, function(){ 
     $(imgnode).attr("src", newPic); 
     $(imgnode).attr("alt", desc) 
     descNode.text(desc); 
     $(imgnode).fadeTo(500, 1); 
    }); 
} 

Работает отлично, если быстрый/локальный сервер сервера. Работает ужасно, если сервер медленный, где изображение будет исчезать обратно до изменения ...

любая идея?

Редактировать: Я загружаю изображение, когда вызывается changePic. Есть ли лучшие способы сделать это?

Больше: Кроме того, почему это не очень хорошая идея, чтобы поставить последнюю строку,

$ (imgnode) .fadeTo (500, 1);

, вне функции обратного вызова?

Answer 1

Preload the image, но, чтобы быть уверенными, что это полностью загружено, используйте .

Сообщений:

Событие нагрузки посылается к элементу , когда он и все суб-элементы были полностью загружена. Это событие может быть отправлено любому элементу, связанному с URL-адресом : изображениями, сценариями, фреймами, iframe, и объектом окна.

И не пропустите эту линию:

Вполне возможно, что событие загрузки не будет срабатывать, если изображение загружается из кэша браузера. Для учтите эту возможность, мы можем использовать специальное событие нагрузки, которое запускает сразу, если изображение будет готово. event.special.load В настоящее время available as a plugin.

Я собрал пример того, как я думаю, вы хотите, чтобы он работал. Я переключаюсь между тремя изображениями, найденными через Google Images. Я связываю событие загрузки, прежде чем изменять src изображения, чтобы убедиться, что он запущен. http://jsfiddle.net/xdjjR/1/

Answer 2

пользоваться услугой Обратного Param doc еха из дока:

$('#clickme').click(function() { 
$('#book').fadeOut('slow', function() { 
    // Animation complete. 
    }); 
}); 

Answer 3

Я думаю, вы можете предварительно загрузить изображение в скрытые элементы, чтобы он загружался другим html. Когда источник изменился, это изображение должно быть показано немедленно.