Cara memuat gambar secara dinamis (atau malas) saat pengguna menggulirnya ke tampilan


97

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?


Apakah Anda hanya memerlukan pemuatan lambat gambar? Jika Anda membutuhkan konten yang lazy loading, plugin gulir tak terbatas adalah jawaban yang benar
soju

@rsp @jwegner @Nicholas maaf, tapi bukan itu yang diminta Salman.
Alec Smart

@soju: Saya hanya tertarik pada gambar yang lambat memuat; tapi saya mungkin melihat kemungkinan lain di masa depan (yang cukup jauh).
Salman A

21
Membuat Anda bertanya-tanya mengapa perilaku default browser tidak hanya memuat gambar yang terlihat. Bayangkan berapa banyak bandwidth yang dapat dihemat dalam 18 tahun terakhir jika itu masalahnya!
Matthew Lock

2
Meskipun saya memahami alasan di balik pemuatan lambat ... sejujurnya saya tidak tahan ketika saya mengunjungi situs yang menggunakan metode itu. Gambar yang berkedip membuatku gila! :)
Booski

Jawaban:


64

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

Dalam penerapannya, bukankah mereka bekerja sama? Gulir tak terbatas pada satu kolom gambar akan sama dengan pemuatan lambat, bukan? Mungkin saya bingung.
jwegner

1
@jwegner Infinite scroll memungkinkan Anda menambahkan item baru ke bagian bawah halaman saat pengguna mencapai (atau mendekati) bagian bawah. Gambar yang dimuat lambat dapat memiliki placeholder dengan dimensi yang sama di halaman, dengan gambar itu sendiri dimuat di scroll. Jadi, yang terakhir dapat memuat lambat tanpa memengaruhi tata letak halaman.
Annika Backstrom

Ini berfungsi dengan baik di browser desktop dan iOS tetapi tidak berfungsi di android (termasuk 3.x / 4.x). Tahu kenapa? apakah acara gulir tidak didukung?
lahsrah

Saya telah membaca dokumentasi untuk plugin ini dan tampaknya cukup mengagumkan. Akan menggunakan ini di proyek saya berikutnya.
The Muffin Man

berikut adalah plugin terkait, yang mungkin bekerja dengan cara yang sama: afarkas.github.io/lazysizes kecuali saya yakin ini jauh lebih kuat dan menggunakan lebih banyak dari apa yang sudah ada (tidak perlu placeholder, misalnya, tetapi Anda dapat memilikinya jika Anda ingin).
Cregox

10

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 ingin tahu bagaimana ini dibandingkan dengan lazyload Appelsinii? Apakah lebih ringan? Apakah ini berfungsi di setiap browser? Saya ingat lazyload tidak berfungsi di Chrome.
Deathlock

8

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="


sempurna. memberkati fam 🙏
LifterCoder

5

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.


3

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 .


Polyfill dapat ditambahkan secara dinamis jika dukungan browser tidak tersedia
Apoorv Saxena

Dukungan browser jauh lebih baik akhir-akhir ini - dapatkah saya menggunakan
Hastig Zusammenstellen


0

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

0

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.

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.