Как обрабатывать «образ испорчен или усеченный» в светлячок

Question

PLUGIN

Я использую JQuery plugi называется lazyload.

Что это такое - lazy Загрузить изображения - это означает, что они не отображают их в браузере, пока изображение не попадет в область просмотра.

Это полезно, если у вас есть страница с большим количеством изображений, например, и вы не хотите, чтобы она вечно проводилась с начальной загрузкой.

FireFox

Ok, поэтому я также использую Firefox версии 23.0.1

ПРОБЛЕМА

Пробка в большой, однако при прокрутке вниз после некоторых изображений я начала получать ошибки, где изображение не загружается (просто имеет общий держатель места для сломанной ссылки на изображение), а в консоли это журналов:

Image corrupt or truncated: [image url]

Это не то, что есть проблема с изображением. Все они делают индивидуально.

Это не на КОНКРЕТНОМ изображении, так как оно случайное. Если я снова загружу страницу, изображения, которые были corrupt, могут загружаться сейчас, а другие изображения возвращают неработающую ссылку и регистрируют corrupt в консоли.

Я искал вокруг этого, и кажется, что существует некоторая проблема с одновременными выборками для тега src <img>.

Возможно, на выборке должна быть установлена ​​задержка, однако вы не всегда можете сказать, как долго должна быть задержка. И если одно изображение больше другого, оно все равно может конфликтовать (со статическим временем задержки, в отличие от обратного вызова complete).

Поэтому Я хотел бы запросить:

а) Если кто-нибудь знает решение этой (например, ловли, когда происходит ошибка, и повторно вызвав функцию загрузки изображения)
b) Если кто-то может предложить $.extend() в библиотеке выше (lazyload), которая создаст функцию обратного вызова и дождитесь, пока все активные выборки будут complete перед загрузкой следующего (если это проблема - я не уверен, что это так) Я не jQuery ni nja, поэтому я немного потерял код. Я мог бы понять это, но это, вероятно, будет грязно ...
с), если это не проблема, то некоторые направления о том, как я могу решить эту проблему было бы оценено

Answer 1

Как было предложено на этой answer к проблеме, подобных вашему:

Оказывается, что при изменении атрибута ГКЗ IMG тега, Firefox запускает событие загрузки. Это противоречит спецификации HTML5 , в котором говорится, что если атрибут SRC изменяется, то любой другой выборки уже в процессе должен быть завершен (что Firefox делает), и события не должны быть отправлены. Событие загрузки должно быть отправлено , только если выборка была успешно завершена. Поэтому я бы сказал, что факт , что вы получаете событие загрузки, является ошибкой Firefox.

И потом:

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

Это имеет смысл. Внутри lazyload код, вы найдете это одна часть, которая, кажется, при загрузке изображения, в ответ на событие, которое вызывает прокруткой appear:

/* When appear is triggered load original image. */ 
    $self.one("appear", function() { 
     if (!this.loaded) { 
      if (settings.appear) { 
       var elements_left = elements.length; 
       settings.appear.call(self, elements_left, settings); 
      } 
      $("<img />") 
       .bind("load", function() { 

        var original = $self.attr("data-" + settings.data_attribute); 
        $self.hide(); 
        if ($self.is("img")) { 
         $self.attr("src", original); 
        } else { 
         $self.css("background-image", "url('" + original + "')"); 
        } 
        $self[settings.effect](settings.effect_speed); 

        self.loaded = true; 

Вы можете поставить и оператор, а затем каким-то флагом или Fuction доход, который проверяет, является ли последний кадр уже полностью загружен на ту часть:

if ($self.is("img") && lastImageIsLoadde() === true) { /*pseudocode here*/ 

таким образом предотвращая, что img src заменяется до его правильное время (так как settings.placeholder есть образ скрипт берет стоять на месте одного собирающегося загружаться при прокрутке) и посмотреть, работает ли это для вас.

Answer 2

Я хотел бы проверить первый если у вас есть обновленная версия библиотеки lazyload. https://github.com/tuupola/jquery_lazyload/blob/master/jquery.lazyload.min.js

В настоящее время v 1.9.7 является последним. Это может быть ошибка, которую они уже исправили. (changelog: https://github.com/tuupola/jquery_lazyload/blob/master/CHANGELOG.textile)

Во-вторых, в какой версии jQuery вы используете? Может быть, очень старый jQuery со старой библиотекой lazyload вызывает эту проблему? (Или, может быть, самый новый jQuery?)

Если все в порядке, возможно, вы можете посмотреть, как запускается lazyload? У вас есть ajax-запросы и повторная инициализация lazyloading? (Не должно вызывать проблем, но вы никогда не знаете). Или попробовать другую структуру doctype/html?

Если ничего не работает, я бы «разложил» html-документ на действительно чистую версию, где работает lazyloading (просто тестирование локального хоста, или jsfiddle или что-то еще), и поместите части назад один за другим. В конце концов вы должны увидеть, где функциональность ломается.

С JQuery v1.9.1 и v1.9.7 LazyLoad он должен просто работать с этим:

$('.lazy').lazyload(); 

Вот jsfiddle для тестирования: http://jsfiddle.net/web_nfo/21qb88v1/

Или, может быть, Firefox это просто проблема. В настоящее время версия 40 является последней. Возможно, у вас также установлена ​​«бета-версия»? Или безопасный режим?