web-dev-qa-db-ja.com

ユーザーが画像をスクロールして表示するときに画像を動的に（または遅延的に）ロードする方法

これは、ユーザーがページをスクロールダウンして可視ビューポート領域内に入れるときにのみ、スクロールせずに見える画像が読み込まれる「モダン」なWebサイト（facebookやgoogle画像検索など）でこれに気付きました（ソースを表示するとき、ページにはX数の<img>タグが表示されますが、サーバーからすぐにはフェッチされません）。この技術は何と呼ばれ、どのように機能し、いくつのブラウザで機能しますか。また、最小限のコーディングでこの動作を実現できるjQueryプラグインがあります。

編集

ボーナス：HTML要素に「onScrolledIntoView」または類似のイベントがあるかどうかを誰かが説明できます。そうでない場合、これらのプラグインはどのように機能しますか？

javascriptjqueryhtmlscrolllazy-loading
93
Salman A

ここでの答えのいくつかは、無限のページに対するものです。 Salmanが求めているのは、画像の遅延読み込みです。

プラグイン

デモ

編集：これらのプラグインはどのように機能しますか？

これは簡単な説明です：

  1. ウィンドウサイズを検索し、すべての画像の位置とサイズを検索します
  2. 画像がウィンドウサイズ内にない場合は、同じサイズのプレースホルダーに置き換えます
  3. ユーザーが下にスクロールし、画像の位置<scroll + window heightの場合、画像がロードされます
63
Alec Smart

AOLのDave Artzは、昨年jQuery Conference Bostonで最適化に関する素晴らしい講演を行いました。 AOLはSonarと呼ばれるツールを使用して、スクロール位置に基づいたオンデマンドの読み込みを行います。 scrollTop（およびその他）と要素のオフセットを比較して、要素の一部またはすべてが表示されているかどうかを検出する方法の詳細については、コードを確認してください。

jQuery Sonar

Daveは これらのスライド でSonarについて語っています。ソナーはスライド46から始まり、全体的な「ロードオンデマンド」の議論はスライド33から始まります。

10
Annika Backstrom

私は自分の基本的な方法を思いついたが、これはうまくいくようだ（今のところ）。おそらく、私が考えていない人気のあるスクリプトのいくつかに対処するものがたくさんあります。

注-このソリューションは高速で簡単に実装できますが、もちろんパフォーマンスにはあまり適していません。 Apoorv で述べられているように、そして developers.google で説明されているように、新しい Intersection Observer を確実に調べてください。

JQuery

$(window).scroll(function() {
    $.each($('img'), function() {
        if ( $(this).attr('data-src') && $(this).offset().top < ($(window).scrollTop() + $(window).height() + 100) ) {
            var source = $(this).data('src');
            $(this).attr('src', source);
            $(this).removeAttr('data-src');
        }
    })
})

サンプルHTMLコード

<div>
    <img src="" data-src="pathtoyour/image1.jpg">
    <img src="" data-src="pathtoyour/image2.jpg">
    <img src="" data-src="pathtoyour/image3.jpg">
</div>

説明

ページがスクロールされると、ページ上の各画像がチェックされます。

$(this).attr('data-src')-画像に属性data-srcがある場合

そして、それらの画像がウィンドウの下部からどれくらい離れているか。

$(this).offset().top < ($(window).scrollTop() + $(window).height() + 100)

+ 100を好みに合わせて調整します（たとえば-100）

var source = $(this).data('src');-data-src=の値（別名画像URL）を取得します

$(this).attr('src', source);-その値をsrc=に入れます

$(this).removeAttr('data-src');-data-src属性を削除します（したがって、ブラウザーは既にロードされた画像をいじってリソースを浪費しません）

既存のコードへの追加

Htmlを変換するには、エディターでsrc="を検索してsrc="" data-src="に置き換えるだけです

5
Hastig Zusammenstellen

素敵な無限スクロールプラグインがあります here

自分でプログラムしたことはありませんが、これがどのように機能するか想像できます。

  1. イベントはウィンドウのスクロールにバインドされます

    $(window).scroll(myInfinteScrollFunction);

  2. 呼び出された関数は、スクロールトップがウィンドウサイズより大きいかどうかをチェックします

    function myInfiniteScrollFunction() {  
    if($(window).scrollTop() == $(window).height())  
    makeAjaxRequest();  
}

  3. AJAXリクエストが行われ、どの結果から開始するか、取得する数、およびデータプルに必要なその他のパラメーターを指定します。

    $.ajax({
    type: "POST",
    url:  "myAjaxFile.php",
    data: {"resultNum": 30, "numPerPage": 50, "query": "interesting%20icons" },
    success: myInfiniteLoadFunction(msg)
});

  4. Ajaxは（ほとんどJSON形式の）コンテンツを返し、それらをloadnig関数に渡します。

それが理にかなっていることを願っています。

5
jwegner

GetBoundingClientRect（）を呼び出すたびにブラウザーが re-layout に強制され、ページ全体にかなりのジャンクが発生するため、リスナーをスクロールイベントにアタッチするか、setIntervalを使用して画像を遅延読み込みすると、パフォーマンスが大幅に低下します。あなたのウェブサイト。

Lozad.js（依存関係のないちょうど569バイト）を使用します。これは IntersectionObserver を使用して遅延しますイメージをパフォーマンス的にロードします。

2
Apoorv Saxena

イメージレイジーローディングのスイスアーミーナイフは、YUIの ImageLoader です。

これは、単にスクロール位置を監視するだけではなく、この問題のほうが多いためです。

1
Arnaud Meuret

このリンクは私のために働く デモ

1. jQueryライブラリの後、ただしbody終了タグの前にjQuery loadScrollプラグインをロードします。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script><script src="jQuery.loadScroll.js"></script>

2. Html5 data-src属性を使用して、Webページに画像を追加します。通常のimgのsrc属性を使用してプレースホルダーを挿入することもできます。

<img data-src="1.jpg" src="Placeholder.jpg" alt="Image Alt"><img data-src="2.jpg" src="Placeholder.jpg" alt="Image Alt"><img data-src="3.jpg" src="Placeholder.jpg" alt="Image Alt">

3. imgタグでプラグインを呼び出し、画像が表示されるときのfadeIn効果の持続時間を指定します

$('img').loadScroll(500); // in ms
0
vebs

jQuery Lazy を使用しています。テストに約10分かかり、私のウェブサイトの1つ（ CollegeCarePackages.com ）の画像リンクのほとんどに1〜2時間追加しました。私はNO（なし/ゼロ）devとのあらゆる種類の関係を持っていますが、それは私に多くの時間を節約し、基本的に直帰率の改善に役立ちましたモバイルユーザーに感謝します。

0
Cliff Ribaudo