Как обрабатывать "изображение коррумпированное или усеченное" в firefox

PLUGIN

Я использую плагин jQuery под названием lazyload.

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

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

FIREFOX

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

ПРОБЛЕМА

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

Image corrupt or truncated: [image url]

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

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

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

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

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

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

Ответ 1

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

Похоже, что при изменении атрибута src тега 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;

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

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

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

Ответ 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 и Lazyload v1.9.7 он должен просто работать с этим:

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

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

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