Jquery: как выполнить обратный вызов после attr?

#jquery #html #css

#jquery #HTML #css

Вопрос:

Я хочу сначала изменить img src, а затем выполнить другие. Что-то вроде этого-

 $('#bgImage').attr('src','images/' bgImage, function() {
    alert('inside');
});

как я это сделаю?

1. Есть ли конкретная причина, по которой вы хотите сделать это при обратном вызове вместо предложенных решений?

2. ya. для больших изображений я хочу сначала загрузить его

Ответ №1:

Может быть, еще одна строка кода?

 $('#bgImage').attr('src','images/' bgImage),
$('#searchPin').css("top",y "px");
$('#searchPin').css("left",x "px");

Если вы хотите дождаться загрузки изображения, вы, вероятно, ищете событие load :

 $('#bgImage').load(function() {
    $('#searchPin').css("top",y "px");
    $('#searchPin').css("left",x "px");
}).attr('src','images/' bgImage);

Обратите внимание, что load(...) обработчик событий был создан до изменения src атрибута с помощью attr — на случай, если изображение было кэшировано.

Если вы делаете это более одного раза, вы, возможно, захотите также изучить unbind .

1. Я считаю, что вам следует привязать загрузку перед изменением src для случаев, когда адресат уже кэширован.

2. лучше всего использовать bind обработчик для load события перед изменением src атрибута. Это потому, что если изображение кэшировано, то оно будет загружено до того, как вы присоедините обработчик, и оно не будет вызвано.. Вы также должны связать два вызова с одним и тем же элементом или, что еще лучше, поскольку оба относятся к css методу, используйте параметр объекта, который принимает несколько вариантов для изменения .css({top:y 'px', left:x 'px'})

3. @Matt — Это хороший момент. Я соответствующим образом изменю ответ.

4. @Gaby aka G. Petrioli — Я согласен, но я собираюсь оставить .css(...) как есть, поскольку это не то, что конкретно было задано.

Ответ №2:

Когда вы измените источник изображения, оно будет загружено и вызовет событие onload, когда это будет сделано. Итак:

 $('#bgImage').attr('src','images/' bgImage).load(function() {
    $('#searchPin').css("top",y "px");
    $('#searchPin').css("left",x "px");
});

1. лучше всего использовать bind обработчик для load события перед изменением src атрибута. Это потому, что если изображение кэшировано, то оно будет загружено до того, как вы присоедините обработчик, и он не будет вызван.. Вы также должны связать два вызова с одним и тем же элементом или, что еще лучше, поскольку оба относятся к css методу, используйте параметр объекта, который принимает несколько вариантов для изменения .css({top:y 'px', left:x 'px'})

2. Сработало для меня очень хорошо 🙂 Большое вам спасибо.

Ответ №3:

.attr выполняется немедленно. Скорее всего, вам действительно нужно дождаться завершения загрузки изображения, а затем что-то сделать.

 var $img = $("#bgImage");    
$img.load(function(){
    // image is done loading, do something
    alert("worky (not cached)")
});
$img.attr('src','images/'   bgImage);

1. @Matt Этого я точно не знаю; код для проверки кэша изначально был не от меня, он взят из этого сообщения на форуме: forum.jquery.com/topic/wait-until-all-images-are-loaded

2. @Matt Хм … на самом деле это пришло не оттуда. Тогда я понятия не имею.

3. У меня такое чувство, что изначально это произошло из-за некоторой путаницы между XMLHttpRequest.readyState и <img /> завершенным… Я бы поставил деньги на то, что он не существует.

4. Очень интересно. Здесь нет IE9, но я верю вам на слово: P