Загрузка изображения для статических изображений

Question

Я знаю, что для работы образа onload необходимо установить src после того, как обработчик загрузки был подключен. Однако я хочу прикрепить обработчики загрузки к изображениям, которые являются статическими в моем HTML. Прямо сейчас я делаю это следующим образом (используя jQquery):

<img id='img1' src='picture.jpg'>

$('#img1').load( function() {
 alert('foo');
})
.attr('src', $('img1').attr('src'));

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

1010 * редактировать *
Я имел в виду, что это может быть сделано только для селектора, который соответствует только одному изображению, что при этом:

<img class='img1' src='picture.jpg'>
<img class='img1' src='picture2.jpg'>

$('.img1').load( function() {
 alert('foo');
})
.attr('src', $('.img1').attr('src'));

что оба изображения будут иметь src = 'picture.jpg'

Answer 1

Вы можете вызвать событие (или его обработчик) напрямую, вызвав .trigger() или .load().

Если вы знаете, что хотите событие, потому что вы знаете, что изображения уже загружены, то вы можете сделать это следующим образом:

$('#img1').load(function() {
    alert('foo');
  })
  .trigger('load');  // fires the load event on the image

Если вы запускаете свой сценарий на готовом документе или в какой-то момент, когда еще не ясно, есть ли изображения там или нет, то я бы использовал что-то вроде этого:

$('img.static')
  .load(function(){
    alert('foo');
    return false; // cancel event bubble
  })
  .each(function(){
    // trigger events for images that have loaded,
    // other images will trigger the event once they load
    if ( this.complete && this.naturalWidth !== 0 ) {
      $( this ).trigger('load');
    }
  });

Имейте в виду, что событие загрузки вспыхивает (jQuery 1.3), и вы, возможно, преждевременно запускаете обработчик загрузки документа, если вы не отмените всплывающее окно в обработчике img.

Для справки: решение для запуска img.src=img.src, к сожалению, не будет работать правильно в Safari. Вам нужно будет установить src на что-то другое (например, # или about: blank), а затем вернуться для перезагрузки.

Answer 2

Хорошо, я превратил ответ Боргарса в плагин, вот он:

$.fn.imageLoad = function(fn){
    this.load(fn);
    this.each( function() {
        if ( this.complete && this.naturalWidth !== 0 ) {
            $(this).trigger('load');
        }
    });
}

Answer 3

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

$('.static-image').load( function(){ ... } );

Answer 4

Полагаю, это действительно вопрос о селекторах jQuery. Если вы хотите сопоставить все элементы изображения, вы можете использовать img вместо #img1 в качестве селектора.