Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 10.11.2012, 19:26
Аспирант
Отправить личное сообщение для zebra741258963 Посмотреть профиль Найти все сообщения от zebra741258963
 
Регистрация: 13.12.2011
Сообщений: 67

реакция .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? Ведь я не могу следить вдруг где-то (скажем в комментариях на этой странице) данная картинка уже загружена.

Последний раз редактировалось zebra741258963, 10.11.2012 в 19:40.
Ответить с цитированием
  #2 (permalink)  
Старый 10.11.2012, 19:38
Профессор
Отправить личное сообщение для zebra Посмотреть профиль Найти все сообщения от zebra
 
Регистрация: 14.09.2011
Сообщений: 523

Попробуйте поменять местами load и attr('src')
Ответить с цитированием
  #3 (permalink)  
Старый 10.11.2012, 19:44
Аспирант
Отправить личное сообщение для zebra741258963 Посмотреть профиль Найти все сообщения от zebra741258963
 
Регистрация: 13.12.2011
Сообщений: 67

Да... Действительно помогло!!!
Даже незнаю ставить печальный или счастливый смайлик.
Тоесть даже элементарная очерёдность может повлиять на выполнение? Хм...
Теперь беду бдить что события ВСЕГДА обязаны стоять перед операциями!
Спасибо!
Ответить с цитированием
  #4 (permalink)  
Старый 10.11.2012, 19:47
Профессор
Отправить личное сообщение для zebra Посмотреть профиль Найти все сообщения от zebra
 
Регистрация: 14.09.2011
Сообщений: 523

Сами подумайте, установили src,идет подгрузка картинки, а load ещё не висит.
Ответить с цитированием
  #5 (permalink)  
Старый 10.11.2012, 22:21
Аспирант
Отправить личное сообщение для zebra741258963 Посмотреть профиль Найти все сообщения от zebra741258963
 
Регистрация: 13.12.2011
Сообщений: 67

Возникла ещё одна проблема... Причём только на 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.

Последний раз редактировалось zebra741258963, 11.11.2012 в 00:44.
Ответить с цитированием
  #6 (permalink)  
Старый 10.11.2012, 23:44
Профессор
Отправить личное сообщение для zebra Посмотреть профиль Найти все сообщения от zebra
 
Регистрация: 14.09.2011
Сообщений: 523

Сначала добавьте рисунок в dom, потом пропишите src
Ответить с цитированием
  #7 (permalink)  
Старый 10.11.2012, 23:45
Профессор
Отправить личное сообщение для zebra Посмотреть профиль Найти все сообщения от zebra
 
Регистрация: 14.09.2011
Сообщений: 523

Примеры для теста тоже лучше выкладывать в online.
Ответить с цитированием
  #8 (permalink)  
Старый 11.11.2012, 00:23
Аспирант
Отправить личное сообщение для zebra741258963 Посмотреть профиль Найти все сообщения от zebra741258963
 
Регистрация: 13.12.2011
Сообщений: 67

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

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

Последний раз редактировалось zebra741258963, 11.11.2012 в 00:43.
Ответить с цитированием
  #9 (permalink)  
Старый 11.11.2012, 00:29
Профессор
Отправить личное сообщение для zebra Посмотреть профиль Найти все сообщения от zebra
 
Регистрация: 14.09.2011
Сообщений: 523

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



Опции темы Искать в теме
Искать в теме:

Расширенный поиск