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

編集する

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

ここでの回答の一部は、無限ページに関するものです。Salmanが求めているのは、画像の遅延読み込みです。

プラグイン

デモ

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

これは簡単な説明です：

1. ウィンドウサイズを見つけ、すべての画像の位置とそのサイズを見つける
2. 画像がウィンドウサイズ内にない場合は、同じサイズのプレースホルダーに置き換えます
3. ユーザーが下にスクロールすると、画像の位置<スクロール+ウィンドウの高さ、画像が読み込まれます

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

jQueryソナー

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

私は自分の基本的な方法を思い付きました。おそらく、私が考えていなかった、人気のあるスクリプトのいくつかが扱っているものは十数あります。

注 -このソリューションは高速で実装が簡単ですが、もちろんパフォーマンスには優れていません。Apoorvが言及し、パフォーマンスに問題がある場合はdeveloper.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="

ここにはかなり素晴らしい無限スクロールプラグインがあります

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

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関数に渡します。

それが理にかなっていると思います。

getBoundingClientRect（）を呼び出すたびにブラウザがページ全体を再レイアウトし、ウェブサイトにかなりのジャンクを導入するため、リスナーをスクロールイベントにアタッチするか、setIntervalを使用して画像を遅延読み込みすることは、非常に非パフォーマンスです。

使用Lozad.js使用しています（依存性のないちょうど569バイト）、IntersectionObserverを performantly遅延ロードイメージに。

画像遅延読み込みのスイスアーミーナイフは、YUIのImageLoaderです。

この問題には、単にスクロール位置を監視するだけではありません。

このリンクはデモ用に機能します

1. jQueryライブラリの後で、本文の終了タグの前に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属性を使用して画像をウェブページに追加します。通常の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

私はjQuery Lazyを使用しています。テストに約10分、私のWebサイト（CollegeCarePackages.com）のほとんどの画像リンクに追加するのに1〜2時間かかりました。私が持っているNO（なし/ゼロ） DEVにどのような種類の関係を、それは私に多くの時間を保存し、基本的には、モバイルユーザーのための私達の直帰率を向上させる助けと私はそれを感謝しています。