rumah > Kesalahan > Pemuatan konten tertunda. Memuat gambar dengan malas. Plugin B-malas. Apakah Anda menggunakan pemuatan lambat?


Pemuatan konten tertunda. Memuat gambar dengan malas. Plugin B-malas. Apakah Anda menggunakan pemuatan lambat?




Bagian penting dari pengoperasian situs mana pun adalah kecepatan memuatnya di browser pengguna. Hanya ada satu aturan - lebih cepat lebih baik. Tidak selalu mungkin untuk mengoptimalkan proyek, dan di sini beberapa trik datang untuk menyelamatkan kami. Hari ini kita akan berbicara tentang "lazy loading" gambar di situs, dan akan kita gunakan jQuery plugin Beban Malas.

Contoh karya yang paling ilustratif dan terbaik Beban Malas adalah umpan dari jejaring sosial apa pun. Prinsipnya sendiri sederhana, muat gambar secara bertahap saat pengguna menggulir halaman. Jika Anda masuk sedikit ke teori, maka saat Anda membuka halaman HTML, pemuatannya terjadi dalam dua tahap. Pertama, struktur dokumen dimuat, dan kedua, file yang disematkan (dalam kasus kami, gambar) juga dimuat. Lazy Load menempelkan gambar kosong dengan bobot minimum alih-alih gambar kita, dengan membuatnya melalui data:image;base64 , dan saat menggulir, itu sudah memuat konten media utama. Gambar-gambar ini mengurangi waktu buka halaman, yang sangat bagus!

SUMBER

Langkah 1: HTML

Jadi, mari kita mulai dengan menghubungkan skrip:


Mari tambahkan gambar ke halaman:



Saat menambahkan markup, penting untuk menentukan atribut lebar dan tinggi, jika tidak, skrip tidak akan berfungsi atau menentukan lebar dan tinggi dalam gaya gambar.

Langkah 2JS

Sekarang kami memanggil metode baru setelah memuat dokumen HTML:

$("img.lazyImg").lazyload((
efek: "fadeIn"
});
});

Plugin memiliki beberapa pengaturan yang berguna:

  • acara - acara untuk mulai memuat gambar (klik atau gulir);
  • efek - animasi tampilan (tampilkan atau fadeIn);
  • wadah - menentukan wadah untuk mencari gambar;
  • placeholder - Anda dapat mengatur placeholder Anda sendiri di parameter ini.

adalah penolakan untuk memuat semua konten di halaman saat tidak diperlukan. Ini menggunakan penanda untuk menunjukkan bahwa data belum dimuat, tetapi perlu dimuat jika perlu.

Menggunakan pemuatan lambat, gambar dan materi lain di situs dimuat secara asinkron, dan lebih khusus lagi, setelah fragmen halaman web yang terlihat dimuat sepenuhnya atau hanya ketika bagian jendela browser yang terlihat ditampilkan. Misalnya, jika pengunjung tidak menggulir halaman sampai akhir, maka gambar yang terletak di bagian bawah tidak akan dimuat.

Pemuatan lambat relevan pada banyak sumber daya, terutama pada sumber daya yang memiliki banyak gambar. Kunjungi layanan online apa pun dengan foto beresolusi tinggi dan perhatikan bagaimana platform memuat hanya foto yang terlihat di layar Anda, dan saat Anda menggulir ke bawah, foto baru mulai dimuat segera setelah muncul di layar Anda. Saat Anda menggulir, placeholder diganti dengan gambar beresolusi tinggi.

Tidak jarang fragmen halaman tertentu tidak terlihat oleh semua orang, tetapi sejumlah besar sumber daya dihabiskan untuk pemrosesan atau pengiriman materi. Saat itulah saatnya untuk berpikir tentang pemuatan malas, yang menghilangkan pembuatan dan pemuatan elemen tersembunyi hingga perlu dilihat atau digunakan.

Pada catatan. Lazy loading diaktifkan oleh , dan dipicu oleh peristiwa yang dilacak oleh . Oleh karena itu, sebelum menggunakan pemuatan asinkron, penting untuk diperhatikan bahwa pengguna yang tidak memiliki JS tidak akan dapat menggunakan fungsi tersebut, dan robot mesin pencari tidak akan melihat konten yang disembunyikan oleh skrip.

Sekarang mari kita bicara tentang dua alasan bagus mengapa Anda harus memilih pemuatan lambat:

  1. Jika sumber daya web Anda menampilkan artikel atau menyediakan berbagai fungsi bagi pengunjung yang menggunakan JavaScript, maka Anda harus mengunduh file . Sebagai aturan, skrip perlu memuat model objek dokumen sebelum dieksekusi. Oleh karena itu, di situs yang berisi banyak foto dan gambar lain, pemuatan lambat memainkan peran kunci apakah pengunjung akan tetap di sana, atau apakah dia akan segera mencari pesaing.
  2. Prinsip pemuatan asinkron adalah memuat konten hanya jika pengunjung telah menggulir halaman web ke fragmen yang masuk ke bagian yang terlihat dari jendela browser. Sederhananya, foto tidak akan dimuat kecuali pengguna menggulir ke bawah ke titik itu. Dan ini berdampak positif pada penghematan lalu lintas, sehubungan dengan banyak pengguna yang menggunakan gadget dan mereka yang memiliki Internet lemah akan menghargai fitur sumber daya ini. Lain kali mereka pasti ingin mengunjunginya lagi.

Berdasarkan hal tersebut di atas, kita dapat menyimpulkan bahwa pemuatan lambat secara signifikan meningkatkan kinerja situs web.

Varietas pemuatan malas

  1. Menggulir. Konten yang tidak jatuh ke area yang terlihat dimuat hanya setelah pengunjung membaca materi asli yang sudah dimuat dan menggulir halaman ke bawah. Anda dapat menemukan opsi pemuatan asinkron ini di jejaring sosial, di mana umpan berita tidak pernah berakhir, serta di beberapa sumber media online, toko online, dan katalog barang dan jasa. Saat menggunakan pengguliran "tak terbatas", penting untuk memastikan navigasi yang kompeten ke menu utama dengan menyetel panel tetap atau tombol "atas".
  2. Menangis. Konten akan dimuat setelah pengguna mengklik tautan khusus dari jenis "lebih detail". Lebih banyak contoh pemuatan klik untuk memuat termasuk jendela modal dan membuka gambar ukuran penuh setelah mengklik thumbnail. Metode menampilkan informasi ini adalah yang paling umum, tetapi jarang menarik bagi pengguna. Jika materi tersebut masih menarik bagi pengunjung atau sangat penting untuk mesin telusur, dan Anda hanya perlu menyembunyikannya untuk menghemat ruang, lebih baik mengimplementasikan fungsi tersebut melalui JS standar, daripada AJAX. Jadi konten akan dimuat, dan ditampilkan hanya setelah diklik.
  3. Modus latar belakang. Katakanlah seorang pengunjung telah mengunduh dokumen dan membiarkannya terbuka. Dalam hal ini, di latar belakang, Anda dapat mengunduh, misalnya, foto berskala besar, yang akan dia perlukan untuk pekerjaan selanjutnya dengan sumber daya tersebut. Metode ini secara signifikan mempercepat fungsionalitas situs, tetapi hanya jika Anda mengunggah materi yang benar-benar dibutuhkan audiens. Agar tidak salah hitung, pelajari statistik kunjungan. Jangan lupa juga untuk memperhitungkan kecepatan internet pengguna, jika tidak, Anda hanya akan merugikannya.

Bagaimana cara melakukan pemuatan malas?

Untuk meningkatkan kinerja situs, Anda perlu membuat skrip pemuatan lambat untuk gambar dan konten. Ada banyak opsi untuk melakukan ini.

5 opsi pemuatan malas untuk gambar

Mari kita bicara tentang solusi pemuatan malas yang paling umum dan siap pakai untuk gambar.

Dalam versi yang disederhanakan, skrip pemuatan lambat ini merupakan pengganti atribut src pada data-src di tag img:

Elemen img, yang berisi atribut data-src, tersembunyi di . Setelah gambar dimuat, gambar ditampilkan dengan halus dengan transisi yang diterapkan:

img ( opasitas: 1; transisi: opasitas 0,3s; ) img ( opasitas: 0; )

JavaScript kemudian diteruskan ke semua tag img atribut src, yang akhirnya mendapatkan nilai atribut data-src. Setelah mengunduh semua gambar, data-src dihapus dari img:

ForEach.call(document.querySelectorAll("img"), function(img) ( img.setAttribute("src", img.getAttribute("data-src")); img.onload = function() ( img.removeAttribute( "data-src"); ); ));

David Walsh juga menyediakan fallback jika terjadi kegagalan JavaScript, yang efisien dan mudah diimplementasikan. Namun, fungsinya tidak menyediakan pemuatan saat menggulir halaman web. Ini berarti browser memuat semua gambar, terlepas dari apakah pengunjung "mencapai" atau tidak. Ya, fallback memungkinkan Anda menampilkan halaman lebih cepat, karena gambar dimuat setelah HTML, tetapi tidak akan ada penghematan lalu lintas.

Teknik ini melibatkan pemuatan lambat, yang menggunakan JS sebagai peningkatan standar CSS dan HTML. Peningkatan progresif memastikan bahwa gambar ditampilkan kepada pengguna bahkan jika JavaScript, yang bertanggung jawab untuk menampilkannya, dinonaktifkan atau terjadi kesalahan yang memblokir skrip agar tidak berfungsi.

Peningkatan progresif memiliki beberapa manfaat:

  1. Teknik ini relevan baik dalam kasus JS yang dinonaktifkan dan rusak. Ini penting karena skrip sering mengalami kesalahan.
  2. Ini memberi pengguna akses mudah ke materi sumber daya.
  3. Untuk mengimplementasikan metode ini, tidak perlu menggunakan plugin dan framework.
  4. Pemuatan lambat berfungsi melalui pengguliran - foto tidak akan dimuat hingga pengunjung menggulir halaman ke tempat yang sesuai.

Anda dapat menemukan informasi mendetail tentang solusi Osborne.

Nomor 3. plugin bLazy.js di JS biasa

Skrip ini ringan, melakukan pemuatan asinkron, dan bekerja dengan banyak gambar untuk menghemat lalu lintas dan permintaan ke server. Aplikasinya menyediakan:

  1. Latar belakang pemuatan lambat dan gambar tambahan.
  2. Dukungan untuk browser lawas, termasuk versi IE 7 dan 8.
  3. Memuat gambar dalam wadah yang dapat digulir.
  4. Menggunakan CDN untuk menghosting plugin di luar server.
  5. Memuat semua elemen yang berisi atribut src: skrip, iframe, dll.
  6. Unggah foto secara asinkron berdasarkan resolusi dan ukuran layar.

Implementasi standar. Markup:

Menandai img perlu diubah:

  1. Tambahkan class.b-lazy.
  2. Sebagai sebuah nilai src terapkan placeholder. Menyimpan jumlah permintaan ke server akan membantu inline transparan gif dengan kode basis. Namun perlu diketahui bahwa halaman lain yang akan menggunakan gambar yang sama tidak akan di-cache.
  3. Data-src menunjuk ke gambar yang perlu dimuat secara asinkron.

JavaScript: Tentukan panggilan standar bLazy dan atur objek sesuai dengan peta opsi:

Var bLazy = new Blazy(( //opsi ));

Nomor 4. Lazy Load XT jQuery Plugin

Plugin yang bagus untuk menulis skrip pemuatan malas Anda sendiri dengan nyaman. Perhatikan bahwa ada versi lengkap dari plugin jQuery, di mana, melalui pemuatan asinkron, Anda dapat memuat video, iframe, dan tag lain yang berisi atribut src, dan ada yang disederhanakan, didedikasikan khusus untuk pemuatan lambat yang sederhana.

Untuk menggunakan plugin di situs, Anda perlu menambahkan pustaka jQuery sebelum tag penutup, dengan menentukan jquery.lazyloadxt.js(versi sederhana) atau jquery.lazyloadxt.extra.js(diperpanjang):

Ada juga opsi alternatif yang memungkinkan Anda untuk tidak menggunakan seluruh plugin - skrip ringan jqlight.lazyloadxt.min.js :

Dalam gambar, ganti src per atribut data-src:

Plugin dapat diaktifkan secara otomatis, atau Anda dapat melakukannya sendiri. Untuk melakukan ini, cukup ketik:

$(elements).lazyLoadXT();

Lazy Load XT jQuetry menambahkan sejumlah besar addon. Misalnya:

  1. Dengan menambahkan jquery.lazyloadxt.spinner.css, dalam proses memuat gambar, dimungkinkan untuk menampilkan pemintal animasi.
  2. Menghubungkan untuk situs animate.min.css dan menentukan dalam file JS $.lazyLoadXT.onload.addClass = 'bounceOutLeft animasi'; Anda dapat menambahkan berbagai efek dari Animate.css untuk memuat gambar.

Keuntungan teknologi:

  1. Bekerja dengan sejumlah besar browser.
  2. Mendukung CDN, jadi skrip tidak perlu diunggah ke server.
  3. Memberikan kemampuan untuk memuat berbagai jenis media secara asinkron.
  4. Addons memungkinkan Anda membuat transisi yang indah, memuat gambar latar dengan malas, dan banyak lagi.
  5. Banyak kasus penggunaan pemuatan lambat – di halaman, dalam tata letak gulir horizontal atau vertikal, dalam wadah, dll.
  6. Jika Anda tidak ingin menggunakan seluruh plugin, Anda dapat menyertakan skrip yang ringan.
  7. Materi memberi tahu Anda cara bertindak jika JavaScript dinonaktifkan di browser.

Anda dapat melihat semua tambahan dan opsi di tautan ini.

Nomor 5. Gambar Kabur oleh Craig Buckler

Anda mungkin telah memperhatikan di beberapa situs bagaimana gambar utama artikel tersebut pertama-tama buram, dan kemudian gambar berkualitas tinggi yang jelas dimuat. Ada beberapa pilihan untuk mengupload foto dengan menggunakan metode efek blur. Salah satu yang terbaik adalah Craig Buckler.

Keuntungan dari teknik ini adalah:

  1. Performa tinggi: lebih dari 1 byte kode JS dan 463 byte CSS.
  2. Independensi dari framework dan library.
  3. Dukungan untuk layar retina.
  4. Terapkan peningkatan progresif untuk JavaScript yang rusak dan browser lawas.

Anda dapat mengunduh kode dari repositori GitHub.

Pertama, Anda perlu menyertakan pustaka jQuery:

Inti dari metode ini adalah memuat elemen yang diperlukan menggunakan AJAX div dari file kiri ke halaman arahan.

Portofolio

Menampilkan lebih banyak...

Semuanya cukup sederhana dan jelas. Tetapi Anda perlu memperhatikan div dengan id="smartPortfolio", , karena mereka berada dalam skrip terpenting yang bertanggung jawab untuk memuat konten dari dokumen pihak ketiga. "Wadah" portofolio adalah SmartPortfolio. MoreButton - sebuah tombol, dengan mengklik di mana fragmen lain dari portofolio dimuat. LoadingDiv - bagian halaman tempat teks akan ditampilkan jika terjadi pembukaan portofolio penuh atau kesalahan apa pun.

Misalnya, banyak dari mereka yang membaca artikel ini kemudian akan menguji skrip melalui file indeks di browser daripada mengunggahnya ke server. Akan menerima pemberitahuan kesalahan. Dan jika ada juga koneksi Internet yang lemah, maka file akan membutuhkan waktu lebih lama untuk diunduh. Oleh karena itu, penting untuk menulis pesan atau menyisipkan gambar, memberi tahu pengguna bahwa unduhan sedang berlangsung.

Ini skripnya sendiri, untuk menghubungkannya Anda perlu memasukkan kode sebelum tag penutup tubuh:

var beban malas = beban malas || (); (function($, lazyload) ( "use strict"; var page = 2, buttonId = "#moreButton", loadingId = "#loadingDiv", container = "#smartPortfolio"; lazyload.load = function() ( var url = "./halaman/" + halaman + ".html"; $(buttonId).hide(); $(loadingId).show(); $.ajax(( url: url, sukses: fungsi(respons) ( jika ( !response || response.trim() == "TIDAK ADA") ( $(buttonId).fadeOut(); $(loadingId).text("Portofolio sudah terisi penuh"); return; ) appendContests(respons); ), error : function(response) ( $(loadingId).text("Maaf, ada yang salah dengan permintaan. Harap segarkan halaman."); ) )); ); var appendContests = function(response) ( var id = $ (buttonId); $(buttonId).show(); $(loadingId).hide(); $(response).appendTo($(container)); halaman += 1; ); ))(jQuery, lazyload) ;

Dalam struktur sumber daya web, halaman dari mana data akan diambil untuk dimuat saat diklik terletak di folder halaman. Ini memiliki 3 file, yang terakhir kosong. Jadi itu disediakan oleh logika skrip. Jalan di dalamnya terlihat seperti ini:

Var url = "./halaman/" + halaman + ".html";

Namun saat menggunakan jalur yang berbeda, penting untuk menggantinya di skrip itu sendiri. Hal yang sama harus dilakukan jika Anda menggunakan ID lain:

ButtonId = "#moreButton", loadingId = "#loadingDiv", container = "#smartPortfolio";

Gambar dimuat ke halaman dengan dua cara utama: tag HTML dan dengan bantuan Properti gambar latar CSS. Oleh karena itu, pertama-tama kita akan melihat contoh dengan tag, lalu beralih ke pertimbangan Gambar latar CSS.

Malas memuat gambar dengan tag img

Mari kita mulai dengan yang sederhana HTML markup untuk menyisipkan gambar pada halaman.

Markup untuk gambar yang dimuat dengan lambat hampir sama.

Langkah kedua adalah menghindari memuat gambar sebelum waktunya. Browser menggunakan atribut src dari tag img untuk mulai mengunduh gambar. Dan tidak masalah apakah gambar ini yang pertama atau yang keseribu berturut-turut. Jika browser menemukan atributnya src di markup itu segera mulai memuat gambar, meskipun di luar jangkauan.

Untuk menunda pemuatan gambar, Anda harus meletakkan URL alamat gambar dalam atribut selain atribut src, katakanlah dalam data-src. Dan seperti atribut src kosong, maka browser tidak akan memuat gambar ini.

Sekarang, karena kami telah mencegah gambar dimuat sekaligus, kami memerlukan beberapa cara untuk memberi tahu browser kapan gambar harus dimuat. Kalau tidak, itu tidak akan pernah terjadi. Untuk melakukan ini, kami memeriksa apakah gambar (dalam kasus kami, penggantinya adalah persegi panjang abu-abu) ada di area yang dapat dilihat, lalu memuatnya.

Ada dua cara untuk menentukan apakah suatu gambar berada dalam cakupan. Mari kita lihat masing-masing contoh ini melalui kodenya.

Metode pertama. Memicu Pemuatan Gambar Menggunakan Acara JavaScript

Metode ini menggunakan penangan untuk kejadian berikut: gulir, ubah ukuran dan orientasiUbah. gulir acara ( menggulir) menentukan posisi pengguna saat ini di laman saat dia memutar ulang laman tersebut. Acara ubah ukuran dan orientasiUbah sama pentingnya. Peristiwa mengubah ukuran dipecat ketika jendela browser diubah ukurannya dan acara orientasiUbah dipanggil saat orientasi perangkat berubah dari mode lanskap ke mode potret dan sebaliknya.

Kami akan menggunakan ketiga peristiwa ini untuk mendeteksi perubahan layar dan menghitung jumlah gambar yang harus ditampilkan di layar. Setelah semua ini, kami akan mengunggahnya.

Saat salah satu peristiwa ini muncul, kami menemukan semua gambar di halaman yang belum dimuat. Dari gambar-gambar ini, kami memilih dengan tepat yang ada di area yang terlihat di browser. Pilihan dibuat berdasarkan perhitungan offset atas gambar, posisi teratas dokumen saat ini, dan tinggi jendela. Jadi jika sebuah gambar muncul di viewport, kami akan memilihnya URL dari atribut data-src dan memindahkannya ke atribut src, maka browser akan memuat gambar.

Harap dicatat bahwa kami JavaScript pilih semua gambar yang memiliki kelas malas. Setelah gambar dimuat, kami akan menghapus kelas ini karena kami tidak perlu lagi memecat acara. Dan setelah semua gambar dimuat, kami akan menghapus semua event handler.

Jangan lupa bahwa saat kita memundurkan halaman, acara gulir akan diaktifkan berkali-kali. Jadi untuk meningkatkan kinerja, kami menambahkan sedikit waktu tunggu ke skrip kami yang memperlambat eksekusi pemuatan lambat sehingga tidak memblokir tugas lain yang berjalan di utas yang sama di browser.

Berikut adalah contoh kerja dari pendekatan ini:

Nah, pada artikel kali ini kita telah membahas cara yang pertama malas memuat gambar, dan pada artikel berikutnya kita akan membahas metode lain.

Situs web yang bagus harus dimuat dengan cepat. Poin ini harus diperhitungkan saat membuat situs, dan saat menganalisis dan mengoptimalkan situs yang ada. Saat memuat halaman proyek Internet, pengunjung tidak suka menunggu terlalu lama.

Pada artikel ini, kita akan berbicara tentang "mempercepat" pemuatan situs menggunakan "pemuatan gambar yang lambat" dalam Javascript, kami akan memberikan contoh implementasi untuk kerangka kerja mootools dan jQuery yang terkenal. Ini terutama berlaku untuk situs yang menggunakan gambar berkualitas tinggi (portal berita, situs yang didedikasikan untuk fotografi, desain, clipart, jejaring sosial, blog besar, dll.)

Malas memuat gambar dengan javascript menggunakan mootools, jQuery

Masalah apa yang menunggu kami saat memuat gambar? Selama pemuatan gambar normal, jika ada gambar yang rusak atau hilang, atau gambar dimuat dari sumber lain, atau gambar dimuat "terlalu lambat", situs "macet".

Pemuatannya tidak akan dilanjutkan hingga kita mendapatkan gambar saat ini, atau batas waktu menit habis. Apa yang dilihat pengunjung? Seringkali - tidak ada apa-apa, hanya layar putih, atau bagian situs yang terpisah-pisah. Apakah dia akan mentolerir "trik" situs seperti itu dan akankah dia kembali lagi?

Dengan bantuan pemuatan gambar yang malas, kita dapat menghindari hal ini. Dan pada saat yang sama, gambar dengan metode "lazy loading" dimuat secara asinkron, dalam urutan acak, setelah konten utama situs dimuat sepenuhnya, memungkinkan pengunjung untuk mulai membaca dan melihat informasi yang menarik baginya. Secara visual, dari sudut pandang pengunjung, ini secara signifikan "mempercepat" pemuatan halaman.

Ide malas memuat gambar dalam javascript

Idenya, secara umum, sederhana. Ada acara di javascript "domready". Yang terjadi selama penerimaan struktur lengkap dokumen html dan bahkan sebelum halaman dimuat sepenuhnya. Jadi, setelah terjadinya peristiwa ini, kami dapatkan daftar gambar yang diinginkan, "reset" atribut src setiap gambar, dengan menetapkan nilai untuk itu, misalnya, jangkar: #. src gambar yang sama simpan di atribut gambar terpisah, misalnya, longDesc. Sembunyikan gambar dengan menugaskan css aturan: visibilitas: tersembunyi.

Setelah halaman terisi penuh pada acara window.onload, setiap gambar "dikembalikan" atribut aslinya src(yang pada dasarnya menyebabkan gambar asli "dimuat"). Gambar satu demi satu mulai "muncul" di halaman.

Meningkatkan ide pemuatan malas

Dan bagaimana jika hanya gambar yang dilihat pengunjung yang tertunda untuk dimuat. Di bagian layar yang terlihat? Dan sesuai kebutuhan, kapan pengunjung menggunakan tombol scroll dan memuat sisanya?

Apa lagi? Akan menyenangkan secara visual untuk pengunjung menunjukkan bahwa sesuatu sedang terjadi di halaman. Misalnya, bahwa gambar yang tertunda dimuat. Untuk melakukan ini, cukup masukkan beberapa elemen rentang tepat setelah gambar, tetapkan preloader kelas css untuk itu dan gaya elemen di dalam css.

Kemudian menetapkan latar belakang ohm dinamis intuitif tematik memuat gambar, katakanlah, dalam format gif. Sekarang setelah gambar saat ini dimuat penuh pada terjadinya peristiwa onload objek gambar hapus elemen span.preloader Dan menampilkan gambar itu sendiri dengan memberikan gambar css aturan: visibilitas: terlihat;

Menerapkan Lazy Loading Gambar dalam Javascript

Dan inilah masalah nomor satu. Ini luar biasa! Namun sejauh ini, tidak ada browser yang benar-benar mendukung event onload pada objek gambar! Peristiwa itu terjadi secara spontan.

Akibatnya, gambar terkadang muncul, terkadang tidak muncul sama sekali, dan bahkan gambar yang sama selama pengunduhan berbeda dari halaman yang sama: peristiwa tersebut mungkin tidak terjadi sama sekali, atau terjadi lebih awal, sebelum gambar dimuat sepenuhnya.

Tiru event onload untuk objek Image

Jadi, setelah direnungkan, kami sampai pada kesimpulan itu gambar dianggap diunggah hanya jika memiliki atribut panjang dan tinggi: lebar, tinggi menjadi berbeda dari 0. Tapi di sini, seperti biasa, saya senang dengan Internet Explorer, yang, jika gagal memuat gambar, "mengganti" yang "default" dengan palang merah, yang juga memiliki panjang dan tinggi, sebagai gantinya.

Menjelajahi lebih jauh properti objek gambar, kami menemukan bahwa kami juga perlu periksa properti lengkap- yang menunjukkan apakah gambar telah terisi penuh. Selain itu, Safari, Google Chrome, yang dibangun di atas mesin Webkit, senang, menurut pendapat mereka, apakah gambar dimuat atau tidak - tidak masalah, lengkap selalu benar.

Jadi Anda harus memproses onerror, onabort event untuk setiap gambar, dan jika terjadi (jika terjadi kesalahan pemuatan), setel atribut lebar dan tinggi gambar ke nilai 0. Jadi, pada akhirnya, kami memeriksa ketiga properti objek gambar ini setelah selang waktu tertentu.

Begitu selesai = benar, dan lebar, tinggi berbeda dari 0, gambar dimuat sepenuhnya dan tidak pecah. Namun, agar tidak "menghasilkan" kejadian interval tanpa akhir, kami akan menentukan jumlah waktu maksimum setelah itu kami akan membatalkan kejadian pemeriksaan interval untuk gambar saat ini, kami akan berasumsi bahwa gambar tidak dapat diperoleh, dan kami akan menyembunyikan objek pemuatannya.

Dan juga kami akan membagi semua gambar menjadi dua grup, yang berada di area yang terlihat di layar pengunjung, kami akan menambahkannya untuk memuat segera setelah halaman dimuat sepenuhnya, dan yang berada di area yang tidak terlihat dari layar, kami akan memuat gambar ini saat peristiwa onscroll terjadi - saat pengunjung menggulir mouse.

Implementasi pemuatan gambar yang malas di Mootools dan jQuery

Izinkan saya memberi Anda dua implementasi gambar pemuatan malas di Mootools dan jQuery.

Mootools 1.1 - 1.4.4:

jQuery 1.3.2 - 1.7.1:

Contoh penerapan lazy loading gambar di javascript

Catatan: untuk digunakan dalam mode kompatibilitas dengan jQuery.noconflict() semua kemunculan tanda $ diganti dengan meneruskan parameter ke objek jQuery

pengaturan javascript:

  1. preloadObjects = "img";- di sini kami menentukan pemilih, dari mana memilih gambar? Anda dapat memilih semua gambar di halaman "img", Anda hanya dapat memilih gambar dengan kelas tertentu, misalnya: "img.lazyload", atau di penampung induk tertentu "#parentcontainer img". Catatan penulis: Karena pilihan pemilih untuk menetapkan pemuatan gambar yang malas terserah Anda, kami memutuskan untuk menambahkan tanda centang kecil dan hanya memilih elemen dengan pemilih yang ditentukan yang akan menjadi gambar untuk menghindari situasi konflik.
  2. bebanTunggu = 30000;- waktu maksimum dalam milidetik hingga pemeriksaan pemuatan gambar akan dilakukan (emulasi peristiwa image.onload), dan setelah itu gambar akan dianggap rusak atau dibongkar
  3. loadCheck = 300;– penundaan dalam milidetik antara interval untuk memeriksa status gambar (dimuat atau tidak?). Ini sama dengan setengah detik secara default, Anda dapat menetapkan nilai yang lebih kecil. Tetapi kami tidak menyarankan Anda untuk menyetel nilainya menjadi kurang dari 200 milidetik, jika ada banyak gambar, maka "poling" interval yang terlalu cepat akan menyebabkan "rem" browser.
  4. notImagesLoaded = ;- array akan digunakan untuk menyimpan gambar kita
  5. mengecualikanGambar = salah;- untuk gambar tertentu yang ingin Anda kecualikan dari pemuatan "ditangguhkan", Anda dapat menetapkan kelas tambahan, yang namanya ditetapkan ke parameter mengecualikanGambar, Misalnya: mengecualikanGambar = "mengecualikan"; akan mengecualikan gambar dengan kelas yang dikecualikan dari proses pemuatan lambat. Hal ini dilakukan untuk menghindari konflik dengan jenis pustaka javascript lain yang bekerja di situs Anda pada gambar (hanya gunakan metode ini saat konflik benar-benar muncul).

pengaturan css:

Untuk memberi gaya pada elemen yang menampilkan pemuatan gambar, gunakan kelas

Span.preloader ( display: block; background: url(path to loading image); )

Di sini Anda dapat mengatur gaya elemen yang akan ditampilkan "sebagai pengganti" gambar hingga dimuat sepenuhnya, seperti yang Anda inginkan. Juga elemen ini span.preloader kelas tambahan yang sesuai dengan kelas gambar akan diberikan, yang akan menyederhanakan pembentukan gaya css.

Penjelasan: artinya jika gambar yang ditambahkan ke antrian lazy load memiliki kelas kelas=”gambar besar”, lalu di "rintisan" span.preloader, yang akan "memvisualisasikan" proses pemuatan, masing-masing, kelas class=”preloader gambar besar”, faktanya, semua aturan yang akan ditetapkan ke gambar akan diterapkan ke rintisan. Akibatnya, dengan pemuatan gambar yang lambat, tampilan halaman situs tetap tidak berubah.

Di browser apa saja lazy loading diuji?

IE 7,8,9, Firefox 3.6 - 10, Opera 11.61, Safari, Chrome terbaru

Bagaimana cara memastikan bahwa "lazy loading" benar-benar berfungsi? Dan memuat gambar tepat setelah pemuatan halaman?

Bahkan dengan mata telanjang, setelah menginstal solusi kami, Anda akan melihat bahwa situs mulai "memuat" lebih cepat, dan gambar yang ditentukan untuk pemuatan lambat "dimuat" hanya setelah halaman saat ini dimuat sepenuhnya.

Tapi, yang pasti, unduh, misalnya, browser Opera, buka salah satu contoh dan perhatikan fakta bahwa setelah halaman dimuat sepenuhnya dan saat menggulir ke bawah, pemuatan gambar ditampilkan secara visual di bilah status browser (bilah alamat) saat menggulir ( penghitung gambar yang diminta berubah).

Apakah akan ada versi javascript murni dari lazy loading tanpa menggunakan jQuery, Mootools?

Ya, tetapi itu membutuhkan penulisan dan pengujian fitur tambahan, sehingga akan muncul nanti.

Pemuatan gambar yang cepat dan mulus adalah salah satu komponen penting dari antarmuka web yang bagus. Selain itu, semakin banyak situs yang menggunakan foto besar dalam desain, sangat penting bagi proyek semacam itu untuk memantau pemuatan grafik yang benar. Artikel ini menjelaskan beberapa teknik yang akan membantu Anda mengontrol pemuatan gambar.

Menggunakan wadah untuk setiap gambar

Metode sederhana yang dapat diterapkan pada gambar apa pun di situs. Ini terdiri dari fakta bahwa setiap gambar dibungkus dalam DIV, yang mencegah pemuatan baris demi baris:


Menggunakan wadah, Anda dapat mengontrol rasio aspek gambar, serta menggunakan indikator pemuatan, yang sangat nyaman jika gambarnya berat.

Misalnya, untuk menyetel rasio aspek ke 4:3, Anda dapat menggunakan CSS berikut:

Img_wrapper( position: relative; padding-top: 75%; overflow: hidden; ) .img_wrapper img( position: absolute; top: 0; width: 100%; opacity: 0; )
Agar gambar ditampilkan di browser hanya setelah dimuat sepenuhnya, Anda perlu menambahkan event onload untuk gambar dan menggunakan JavaScript yang akan menangani event tersebut:


function imgLoaded(img)( var $img = $(img); $img.parent().addClass("loaded"); );
Kode fungsi di dalam tag HEAD harus ditempatkan paling akhir, setelah jQuery atau plugin lainnya. Setelah gambar dimuat sepenuhnya, itu harus ditampilkan di halaman:

img_wrapper.loaded img( opacity: 1; )
Untuk efek tampilan gambar yang halus, Anda dapat menggunakan transisi CSS3:

Img_wrapper img( position: absolute; top: 0; width: 100%; opacity: 0; -webkit-transition: opacity 150ms; -moz-transition: opacity 150ms; -ms-transition: opacity 150ms; transisi: opacity 150ms; )
Contoh hidup dari metode ini adalah mungkin.

Menggunakan Penampung untuk Banyak Gambar

Metode sebelumnya bekerja dengan baik untuk masing-masing gambar, tetapi bagaimana jika ada banyak gambar di halaman, seperti galeri foto atau penggeser? Memuat semuanya sekaligus tidak praktis - gambar bisa sangat berat. Untuk mengatasi masalah ini, Anda dapat memaksa JavaScript untuk hanya memuat gambar yang Anda butuhkan pada waktu tertentu.Contoh markup HTML untuk tayangan slide:


Kami menggunakan fungsi slideLoaded() untuk mengontrol proses:

Fungsi slideLoaded(img)( var $img = $(img), $slideWrapper = $img.parent(), total = $slideWrapper.find("img").length, persenLoaded = null; $img.addClass("loaded "); var dimuat = $slideWrapper.find(".loaded").panjang; if(dimuat == total)( persenDimuat = 100; // PLUGIN INSTANTIASI $slideWrapper.easyFader(); ) else ( // MELACAK KEMAJUAN persenDimuat = dimuat/total * 100; ); );
Gambar yang dimuat diberi kelas yang dimuat dan progres keseluruhan ditampilkan. Sekali lagi, JavaScript harus ditempatkan di akhir tag HEAD, setelah yang lainnya.

caching

Di situs yang berat secara grafis, Anda dapat mengunduh gambar di cache browser di latar belakang, tanpa disadari oleh pengguna. Misalnya, ada situs multi-halaman, salah satu halaman dalamnya memiliki banyak konten grafis. Dalam hal ini, disarankan untuk memuat gambar ke dalam cache bahkan sebelum pengguna menavigasi ke halaman yang diinginkan. alamat gambar dalam array:


Saat pengunjung memasuki situs, setelah memuat halaman utama, gambar mulai dimuat ke dalam cache. Agar caching tidak mengganggu tampilan konten saat ini, Anda perlu menambahkan fungsionalitas JavaScript ke acara pemuatan jendela:

Fungsi preCacheHeros()( $.each(heroArray, function()( var img = Gambar baru(); img.src = ini; )); ); $(window).load(function()( preCacheHeros(); ));
Metode ini meningkatkan kegunaan situs, tetapi memberi beban tambahan pada server. Ini harus diingat ketika menerapkan fungsi tersebut. Selain itu, perlu untuk mempertimbangkan kemungkinan jalur pengunjung di situs dan gambar cache yang terletak di halaman yang paling mungkin dikunjungi pengguna. Untuk memahami jalur seperti itu melalui situs, Anda perlu menganalisis statistik lalu lintas.

Memuat menurut acara

caranya adalah gambar mulai dimuat setelah peristiwa tertentu. Ini meningkatkan kinerja dan menghemat lalu lintas pengguna. markup HTML:


Perlu dicatat bahwa URL gambar diatur dalam data-src, bukan src. Ini diperlukan agar browser tidak segera memuat gambar. Sebagai gantinya, piksel transparan di GIF dimuat di src, diatur di base64, yang mengurangi jumlah perjalanan bolak-balik ke server.

Tetap hanya mengubah nilai src menjadi data-src untuk acara yang diinginkan. JavaScript memungkinkan Anda memuat gambar secara bertahap:

Fungsi lazyLoad()( var $gambar = $(".lazy_load"); $gambar.setiap(fungsi()( var $img = $(ini), src = $img.attr("data-src"); $ img .on("memuat",imgLoaded($img)) .attr("src",src); )); ); $(window).load(function()( lazyLoad(); );

Kesimpulan

Tidak ada satu cara terbaik untuk mengelola pemuatan gambar di situs. Dalam setiap kasus, perlu untuk memilih metode yang sesuai, serta menggabungkan beberapa, jika sesuai. Salah satu poin utama yang perlu Anda perhatikan adalah kinerja dan lalu lintas. Sederhananya, pertama-tama, Anda harus memikirkan bagaimana akan lebih nyaman bagi pengguna situs.