8

私はlazyloadを使用して、表示されている画像のみをロードしようとしています（私のサイトは応答性が高く、一部のコンテンツはdisplay：noneで非表示になっているためです）。

基本的に、lazyloadは機能しますが、ページを少しスクロールした後でのみ機能します。

これは私が使用している遅延ロード設定であり、しきい値を2000px（ページ全体の高さよりも大きい）に設定した後でも、ユーザーがページをスクロールした後（1ピクセルでも）にのみ画像をロードします。このバグは、Webkitブラウザでのみ発生します。

$(document).ready(function () {
    $("img").lazyload({threshold : "2000", effect : "fadeIn", effectspeed: 2000,});
});
4

13 に答える 13

12

パラメータの誤動作の可能性があると思いthresholdますが、それでもこのページに従って手動で読み込みを実行できます。

<script type="text/javascript">
  $(document).ready(function () {
      $("img")
         .lazyload({
             event: "lazyload",
             effect: "fadeIn",
             effectspeed: 2000
           })
         .trigger("lazyload");
  });
</script>

しかし、すべての画像をロードしたいのならready、なぜlazyloadが必要なのですか？あなたはただ使うことができます$.animate。

于 2012-07-10T18:58:53.070 に答える
5

.lazyload（）の後にこれを追加するだけで、スクロールがトリガーされ、画像が表示されます

$(window).trigger('scroll');
于 2013-01-16T11:21:00.803 に答える
3

画像の幅と高さを設定する必要があります。

幅と高さが設定されていない場合、jQueryはdocument.loadイベントでWebkitブラウザに表示されない画像を報告します。skip_invisibleである場合、 trueLazy Loadは画像を無視します。つまり、画像を読み込む必要があるかどうかを判断しようとはしません。初めてスクロールすると読み込まれます。

プラグインを設定するskip_invisibleと、画像が読み込まれるかどうかがわかります。falseただし、幅と高さを設定していないため、すべての画像のサイズは0x0または1x1になります。このため、プラグインが起動すると、すべての画像が（サイズのために）ビューポートに表示されます。画像がビューポートにあるため、LazyLoadはすべての画像を読み込むように指示します。

つまり、画像に幅と高さを追加します。レイジーロードは、それらがないと正しく機能しません。

于 2013-01-17T09:38:07.467 に答える
2

これがいつ追加されたかはわかりませんが、（cssセレクターに応じて）一部またはすべての「appear」イベントを手動で発生させることができます。

$("img.lazy").trigger('appear');

ここからこれを取得しました：http：//yuji.wordpress.com/2014/05/14/force-jquery-lazyload-to-appear/

于 2014-12-04T07:24:34.763 に答える
1

私も同じ問題を抱えていました。それらはスクロールdivにありますが、最初のスクロール後にのみロードされます。

'appear'を使用すると、制限しない限り、すべてが表示されます。私の場合、ロード時に最初の3つだけを表示したかったのです。残りは通常どおり遅延読み込みします。

$("img.lazy:lt(3)").trigger('appear');
于 2016-12-12T14:53:52.243 に答える
0

追加のパラメーターを渡してみてください。

skip_invisible：false

このパラメータはデフォルトでtrueであるため、プラグインがジョブを開始したときに画像が表示されないようです。Webサイトでプリローダーを使用している場合に発生する可能性があります。

于 2012-09-12T17:36:23.907 に答える
0

私は同じ問題を抱えていて、これに対する解決策を見つけました。私の画像は、ajax呼び出しを介して入力されたdiv内に配置されていることに注意してください。

バージョン1.8.4のlazyloadソース内のコード行（147〜150行目）を変更するだけです。

/* Force initial check if images should appear. */
        $(document).ready(function() {
            update();
        });

それ以外の

/* Force initial check if images should appear. */
        $(window).load(function() {
            update();
 });

または、最終的に「update（）」の呼び出しを他の必要なイベントに追加します。

于 2013-05-15T13:55:37.523 に答える
0

同様の問題があり、ajax呼び出しの後、スクロールするまで画像が読み込まれませんでした（1pxだけスクロールした場合でも、画像が読み込まれます）。Mika Tuupolaが言ったように、画像に高さと幅を追加する必要があることがわかりました。私の画像は動的に読み込まれ、画像サイズが異なり、foreachループから読み込まれました。一般的な幅と高さの属性を画像タ​​グに追加し、lazyloadが画像を読み込んだ後、正しい画像サイズが表示されるように属性を削除しました。

<img class="lazy" src="img/placeholder.gif" data-original="img/image.gif" width="1000" height="600">

$('img.lazy').lazyload({
    skip_invisible: false
}).removeClass('lazy').removeAttr('width').removeAttr('height');
于 2013-09-06T01:59:54.157 に答える
0

隠し要素についても同じ問題がありました。簡単な回避策ですが、機能します。ページをクリックすると、スクロールイベントをトリガーしてlazyloadスクリプトを強制します。イベントのサイズ変更でも同じことができます

$(document).ready(function () {
    $("img").lazyload({
        event: "lazyload",
        effect: "fadeIn",
        effectspeed: 2000
    });
    $(window).resize(function () {
        $(this).trigger("scroll");
    }); 
});
于 2015-02-22T19:10:59.950 に答える
0

つまり、画像に幅と高さを追加します。レイジーロードは、それらがないと正しく機能しません。

事前にプレースホルダーをロードする必要があります;このように：</ p> 

<img src="./images/grey.gif" alt="" style="display:none">

その後

$("img.lazy").lazyload({placeholder : "images/grey.gif"});

画像の幅を100％に設定すると、幅と高さが提供されます。これで私の問題は解決しました。

于 2016-06-25T07:34:16.503 に答える
0

これは実用的な解決策ですが、何らかの理由であまり良くありません。

$("img").lazyload({
    /* Image loaded callback function */
    load: function() {
        $(window).trigger('scroll');
    }
});

lazyloadプラグインが画像をロードするたびに、この関数が呼び出され、ウィンドウトリガーの「スクロール」がエミュレートされるので、これは私にとっての解決策です

于 2017-01-20T17:30:43.297 に答える
0

failure_limitを増やします。

ページをスクロールした後、プラグインはアンロードされた画像をループします。ループは、画像が表示されたかどうかをチェックします。デフォルトでは、ビューポート外の最初の画像が見つかるとループが停止します。これは、以下の仮定に基づいています。ページ上の画像の順序は、HTMLコードの画像の順序と同じです。一部のレイアウトの仮定では、これは間違っている可能性があります。

failure_limitを10に設定すると、プラグインは、スクロールしなければ見えない位置にある10個の画像を見つけた後、ロードする画像の検索を停止します。

于 2017-08-23T12:25:03.657 に答える
-1

私は同じ問題を扱っていましたが、この問題は、画像が最初に非表示になっているdiv内に配置されている場合にのみ発生することに気付きました（つまり、display：none;）。

于 2012-08-09T12:03:26.737 に答える