Saya telah memperhatikan ini di banyak situs web "modern" (misalnya pencarian gambar facebook dan google) di mana gambar di paro bawah memuat hanya ketika pengguna menggulir ke bawah halaman cukup untuk membawanya ke dalam wilayah viewport yang terlihat ( berdasarkan sumber tampilan, halaman menunjukkan X sejumlah <img>tag tetapi tidak langsung diambil dari server ). Apa nama teknik ini, bagaimana cara kerjanya dan berapa banyak browser yang melakukannya. Dan apakah ada plugin jQuery yang dapat mencapai perilaku ini dengan pengkodean minimum.

Edit

Bonus: dapatkah seseorang menjelaskan jika ada "onScrolledIntoView" atau peristiwa serupa untuk elemen HTML. Jika tidak, bagaimana cara kerja plugin ini?

Beberapa jawaban di sini adalah untuk halaman tanpa batas. Apa yang Salman tanyakan adalah pemuatan gambar yang lambat.

Plugin

Demo

EDIT: Bagaimana cara kerja plugin ini?

Ini adalah penjelasan yang disederhanakan:

1. Temukan ukuran jendela dan temukan posisi semua gambar dan ukurannya
2. Jika gambar tidak berada dalam ukuran jendela, gantilah dengan placeholder dengan ukuran yang sama
3. Ketika pengguna menggulir ke bawah, dan posisi gambar <scroll + tinggi jendela, gambar dimuat

Dave Artz dari AOL memberikan ceramah hebat tentang pengoptimalan di jQuery Conference Boston tahun lalu. AOL menggunakan alat yang disebut Sonar untuk memuat sesuai permintaan berdasarkan posisi gulir. Periksa kode untuk mengetahui detail bagaimana ia membandingkan scrollTop (dan lainnya) dengan offset elemen untuk mendeteksi jika sebagian atau semua elemen terlihat.

jQuery Sonar

Dave berbicara tentang Sonar dalam slide ini . Sonar dimulai pada slide 46, sedangkan keseluruhan diskusi "muat sesuai permintaan" dimulai pada slide 33.

Saya datang dengan metode dasar saya sendiri yang tampaknya berfungsi dengan baik (sejauh ini). Mungkin ada selusin hal beberapa alamat skrip populer yang belum saya pikirkan.

Catatan - Solusi ini cepat dan mudah diterapkan, tetapi tentu saja tidak bagus untuk performa. Pastikan untuk melihat Intersection Observer baru seperti yang disebutkan oleh Apoorv dan dijelaskan oleh developers.google jika kinerja menjadi masalah.

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');
        }
    })
})

Contoh kode html

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

Dijelaskan

Saat halaman di-scroll, setiap gambar di halaman akan dicentang ..

$(this).attr('data-src') - jika gambar memiliki atribut data-src

dan seberapa jauh gambar-gambar itu dari bagian bawah jendela ..

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

sesuaikan + 100 menjadi apa pun yang Anda suka (- 100 misalnya)

var source = $(this).data('src');- mendapat nilai data-src=alias url gambar

$(this).attr('src', source); - masukkan nilai itu ke dalam src=

$(this).removeAttr('data-src'); - menghapus atribut data-src (agar browser Anda tidak membuang sumber daya untuk mengacaukan gambar yang telah dimuat)

Menambahkan ke Kode yang Ada

Untuk mengonversi html Anda, di editor cukup cari dan ganti src="dengansrc="" data-src="

Ada plugin gulir tak terbatas yang cukup bagus di sini

Saya sendiri tidak pernah memprogramnya, tetapi saya membayangkan seperti inilah cara kerjanya.

1. Sebuah acara terikat ke jendela bergulir

   $(window).scroll(myInfinteScrollFunction);

2. Fungsi yang dipanggil memeriksa apakah scroll top lebih besar dari ukuran jendela

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

3. Permintaan AJAX dibuat, menentukan hasil # mana yang akan dimulai, berapa banyak yang harus diambil, dan parameter lain yang diperlukan untuk penarikan data.

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

4. Ajax mengembalikan beberapa konten (kemungkinan besar berformat JSON), dan meneruskannya ke fungsi loadnig.

Harapan itu masuk akal.

Pemuatan gambar yang lambat dengan melampirkan listener ke acara gulir atau dengan menggunakan setInterval sangat tidak berkinerja karena setiap panggilan ke getBoundingClientRect () memaksa browser untuk menata ulang seluruh halaman dan akan menyebabkan jank yang cukup besar ke situs web Anda.

Gunakan Lozad.js (hanya 569 byte tanpa dependensi), yang menggunakan IntersectionObserver untuk memuat gambar secara lambat .

Pisau Swiss Army untuk pemuatan gambar yang lambat adalah ImageLoader milik YUI .

Karena ada lebih banyak masalah ini daripada hanya melihat posisi scroll.

Tautan ini berfungsi untuk demo saya

1. Muat plugin jQuery loadScroll setelah pustaka jQuery, tetapi sebelum tag body penutup.

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

2. Tambahkan gambar ke halaman web Anda menggunakan atribut data-src HTML5. Anda juga dapat memasukkan placeholder menggunakan atribut src img biasa.

<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. Panggil plugin pada tag img dan tentukan durasi efek fadeIn saat gambar Anda ditampilkan

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

Saya menggunakan jQuery Lazy . Saya membutuhkan waktu sekitar 10 menit untuk menguji dan satu atau dua jam untuk menambahkan ke sebagian besar tautan gambar di salah satu situs web saya ( CollegeCarePackages.com ). Saya TIDAK memiliki hubungan (tidak ada / nol) apa pun dengan dev, tetapi hal itu menghemat banyak waktu saya dan pada dasarnya membantu meningkatkan rasio pentalan kami untuk pengguna seluler dan saya menghargainya.