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

Question

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

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

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

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

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

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

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

что оба изображения будут have 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 на что-то другое (например, # или около: пустое), а затем вернуться к перезагрузке.

Answer 2

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

Answer 3

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

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

Answer 4

Хорошо, я повернулся Borgars ответ в плагин, здесь:

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