реакция .load на загруженное фото
 

На экране стоят несколько маленьких картинок. jQuery следит - если на маленькой картинке нажали мышкой, то берётся её srcBig и выводится по центру экрана. Например:

<img class=Mini src=mini1.jpg srcBig=big1.jpg>
<img class=Mini src=mini2.jpg srcBig=big2.jpg>
<img class=Mini src=mini3.jpg srcBig=big3.jpg>
<img class=Mini src=XXX.jpg srcBig=XXX.jpg>

Пока картинка грузится у меня светится изображение, дескать Ждите!
Как только она загружается по событию .load надпись пропадает и на экран выводится картинка.
Всё отлично работает, но иногда возникает проблема с .load
Если в параметре srcBig стоит название картини которая уже по каким либо причинам загружена на странице (как например в четвёртой строке, где надо по центру экрана открыть xxx.jpg которая итак уже отображена на экране), то событие .load не происходит (отчасти это логично, так как она уже давно загружена).

Но подскажите - как тогда правильно поступать в такой ситуации чтобы поймать момент когда картинка загружена и готова к показу?

А вот код:

$(document).ready(function(){
  $('img.Mini').click(function(e) { //при нажатии на картику с классом Mini
    $('<img />') //создаёт новую картинку
      .attr('src', $(this).attr('srcBig')) //определяем что она должна содержать ту картинку что прописана у нас в srcBig
      .load(function() { alert(1); }) //когда наша новая картинка загрузилась мы можем начать её красиво выводить
      .appendTo('body'); //а тут просто добавление картики к body (есть конечно и удаление, просто сокраитл чтобы не отвлекал код)
    
    return false;
  });
});

Тоесть при нажатии на картинки 1, 2 и 3 произойдёт событие alert(1), а если нажимаешь на четвёртую картинку - то .load не срабатывает и событие alert(1) не происходит.

Как тогда поступают? Что тогда надо использовать вместо .load? Ведь я не могу следить вдруг где-то (скажем в комментариях на этой странице) данная картинка уже загружена.

Попробуйте поменять местами load и attr('src')

Да... Действительно помогло!!!
Даже незнаю ставить печальный или счастливый смайлик.
Тоесть даже элементарная очерёдность может повлиять на выполнение? Хм...
Теперь беду бдить что события ВСЕГДА обязаны стоять перед операциями!
Спасибо!

Сами подумайте, установили src,идет подгрузка картинки, а load ещё не висит. :-?

Возникла ещё одна проблема... Причём только на IE8 и НЕ постоянная (то появляется, то нет).

В коде модифицировал:

$(document).ready(function(){  
  $('img.Mini').click(function(e) 
    $('<img id=BigFoto />')
      .load(function()  {alert($('#BigFoto').width())})
      .click(function() {$('#BigFoto').remove()})
      .attr('src', $(this).attr('srcBig'))
      .appendTo('body');

Как и раньше при нажатии на привьюшку jQuery создаёт картинку (тут я дал ей id=BigFoto), и как только она будет загружена, я через алерт вывожу на экран её ширину.
За одно показал как я удаляю её (просто нажатием).

Если нажать на привьюшку первый раз - моя BigFoto создастся.
Потом нажимаю на неё и она удаляется.
Начиная со второго нажатия я в 50% случае не получаю ширину создаваемой картинки. Тоесть могу как получить ширину, так и получить null. При этом сама картинка создастся!
Более того даже если я вместо ширины попытаюсь вывести:
alert($('#BigFoto').attr('id'));
я получу null на запрос самого идинтификатора, который тут разумеется "BigFoto".
Если я попытаюсь посмотреть на страницу глазами IE8 (через встроенный Develouper Tool) то я увижу что img id=BigFoto существует, и даже удалится при нажатии он без пробелем (и ширину свою покажет).

Тоесть я попадаю на какой-то очередной касаяк с тем что .load у меня отрабатывается быстрее чем этой картинке присваевается даже id.

Пробывал заполнить id через атрибуты:

$('<img />')
      .attr('id','BigFoto')
      .load(function()  {alert($('#BigFoto').width())})

результат не меяется - .load в половине случаев запускается до появления картинки.

Проверял на нескольких компах (на очень старой с одноядерным процессором 2005-ого года и на сверхновой с 8-поточным процессором i7-2600K) везде проблема только на IE8.

Сначала добавьте рисунок в dom, потом пропишите src

Примеры для теста тоже лучше выкладывать в online.

Я не совсем понял фразу эту фразу.
Имеестя в виду вначале сделать его .appendTo('body') или каким образом рисунок добаляется в DOM?
Вроде всегда в примерах когда смотришь .appendTo находится в конце...
Может напишите пример?

Так я же выложил полный работающий тестовый пример с картинками и кодами
Мог бы дать и ссылку на работающий вариант, но тогда вам бы пришлось вручную вытаскивать с сервера файлы типа css и js что бы понять что к чему. Я старался сделать удобней для других...

Сначала append, потом добавляете attr('src', 'photo.jpg')
Код выкладывать не в архиве, а как тестовый пример на jsffidle.com, или тут тоже функции есть.