web-dev-qa-db-ja.com

Firefoxで「破損した画像または切り捨てられた画像」を処理する方法

プラグイン

lazyload というjQueryプラグインを使用しています。

これはlazy画像をロードすることです。つまり、画像がビューポートのスコープ内に収まるまで、ブラウザで画像をレンダリングしません。

これは、たとえば、多くの画像を含むページがあり、初期ロードで永久に費やしたくない場合に役立ちます。

FIREFOX

では、Firefoxバージョン_23.0.1_も使用しています

問題

プラグインは素晴らしいですが、いくつかの画像の後に下にスクロールすると、画像が読み込まれず（壊れた画像リンク用の一般的なプレースホルダーがあるだけです）、コンソールに表示されます ）logs：

_Image corrupt or truncated: [image url]_

画像に問題があるわけではありません。それらはすべて個別にうまくレンダリングされます。

ランダムであるため、SPECIFICイメージ上にはありません。ページを再度読み込むと、corruptであった画像が読み込まれる可能性があり、他の画像は壊れたリンクを返し、コンソールにcorruptを記録します。

これを探してみたところ、_<img>_ srcタグの同時フェッチに問題があるようです。

おそらく、フェッチに遅延が設定されているはずですが、遅延がどれくらいの長さである必要があるかは必ずしもわかりません。また、1つの画像が別の画像よりも大きい場合でも、競合する可能性があります（completeコールバックとは対照的に、静的な遅延時間が発生します）。

したがって、私は要求したいと思います：

a）これに対する解決策を誰かが知っている場合（エラーが発生したときにキャッチし、イメージのロード機能を再トリガーするなど）
b）コールバック関数を作成する上記のライブラリ（lazyload）に$.extend()を提案できる人がいる場合すべてのアクティブなフェッチがcompleteになるまで待ってから、次のフェッチをロードします（これが問題である場合-それが問題かどうかはわかりません） 私はjQuery忍者ではないので、コードで少し迷っています。私はそれを理解することはできましたが、おそらく汚れているでしょう...
c）これが問題ではない場合、これを解決する方法に関するいくつかの方向性が高く評価されます

jqueryimagefirefoxlazy-loadingjquery-lazyload
18
Walker Farrow

これに示唆されているように answer あなたのような問題に：

Imgタグのsrc属性を変更すると、Firefoxがロードイベントを発生させるようです。これは、src属性が変更された場合、すでに進行中の他のフェッチはすべて終了する必要がある（Firefoxが行う） ）、、イベントは送信されません。ロードイベントは、フェッチが正常に完了した場合にのみ送信されます。したがって、loadイベントを受け取るのはFirefoxのバグだと思います。

その後：

最良のオプションは、src属性を変更するたびに新しい要素を作成することです。

それは理にかなっています。 lazyloadコード内に、この1つの部分があります。これは、画像が読み込まれたときに、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演算子の後に、最後のイメージがすでにその部分に完全にロードされているかどうかを確認するフラグまたは関数リターンを置くことができます。

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

したがって、それを防ぐimg srcは正しい時刻の前に置き換えられます（settings.placeholderは、スクリプトが、スクロール時に読み込まれる画像の代わりに表示される画像です。

6
Alan Machado

まず、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がこの問題の原因ですか？ （または多分最新のjQuery？）

それで問題がなければ、lazyloadがどのように開始されるかを調べることができますか？ ajaxリクエストがあり、遅延読み込みを再開しますか？ （問題を引き起こすべきではありませんが、あなたは決して知りません）。または、別のdoctype/html構造を試しますか？

何も機能しない場合は、遅延読み込みが機能する本当にきれいなバージョン（localhostテスト、またはjsfiddleなど）にhtmlドキュメントを「ストリップ」して、パーツを1つずつ戻します。最終的には、機能が壊れる場所を確認する必要があります。

JQuery v1.9.1とLazyload v1.9.7では、次のように動作するはずです。

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

テスト用のjsfiddleは次のとおりです。 http://jsfiddle.net/web_nfo/21qb88v1/

あるいは、Firefoxだけが問題なのかもしれません。現在のバージョンは40です。たぶん、あなたは「ベータ」バージョンもインストールしていますか？またはセーフモードをオンにしますか？

0
Develop123