Насколько плох этот метод для запроса изображений вместо AJAX?

Question

У меня есть список миниатюрных изображений, у всех них есть атрибут rel, который является источником того же изображения в большем размере.Моя функция проста: если вы нажмете на миниатюру изображения, больший размер его загружается в контейнер.Интересная часть моего кода, о которой мне нужны ваши отзывы, такова:

Переменные:

'event.data.cImg' - это увеличенное изображение в контейнере, которое я хочуupdate 'event.data.cImgWrap' - это контейнер для большего изображения '$ (this)' - это миниатюрное изображение, по которому щелкнули

event.data.cImg.attr('src', $(this).attr("rel"));

  if (event.data.cImg.complete != 'true') {

      event.data.cImgWrap.css('opacity', '0.7');

      event.data.cImg.load(function() {
          event.data.cImgWrap.css('opacity', '1');
      });
  }

Так в чем недостатки моего кода?

Извините за мой английский, я не являюсь носителем языка и заранее спасибо!

Answer 1

Не все браузеры поддерживают свойство complete изображений.

Я бы предложил установить обработчик load и opacity перед изменением src.Затем измените src.Если изображение уже находится в кеше, событие load сработает немедленно, установив непрозрачность обратно на 1.Все хорошо, пользователь не увидит изменения непрозрачности, потому что это происходит быстрее, чем обновляется экран.

Answer 2

Я не могу вспомнить одну причину, по которой вы хотите использовать ajax для загрузки изображения, если только изображения не хранятся непосредственно в базе данных как данные в кодировке base64 (и не каждый браузер поддерживает URL-адреса данных). В DOM уже есть все, что нужно для «мониторинга» загрузки изображений, так какой смысл использовать ajax для получения изображения? простой запрос GET http делает свое дело.

Единственное, для чего вы бы использовали ajax - это получение URL-адреса изображения и метаданных, таких как заголовок и т. Д., Из списка изображений через веб-сервис ... как предлагалось ранее, полное событие не поддерживается везде.