Gambar preloading adalah cara yang bagus untuk meningkatkan pengalaman pengguna Anda. Gambar -gambar tersebut dimuat sebelumnya ke browser, dan pengunjung dapat berselancar di situs web Anda dengan lancar dan menikmati kecepatan pemuatan yang sangat cepat. Ini sangat bermanfaat untuk galeri gambar dan situs web di mana gambar menyumbang sebagian besar. Ini memastikan gambar -gambar diterbitkan dengan cepat dan mulus, dan juga dapat membantu pengguna mendapatkan pengalaman pengguna yang lebih baik saat menjelajahi konten situs web Anda. Artikel ini akan berbagi tiga teknologi preloading yang berbeda untuk meningkatkan kinerja dan kegunaan situs web.
Metode 1: Gunakan CSS dan JavaScript untuk mengimplementasikan preloading
Ada banyak cara untuk menerapkan gambar preloading, termasuk menggunakan CSS, JavaScript dan berbagai kombinasi keduanya. Teknologi ini dapat merancang solusi yang sesuai sesuai dengan skenario desain yang berbeda, yang sangat efisien.
Menggunakan CSS saja dapat dengan mudah dan efisien memuat gambar, dan kodenya adalah sebagai berikut:
Salinan kode adalah sebagai berikut:
#preload-01 {latar belakang: url (http: //domain.tld/image-01.png) no-rePeat -9999px -9999px; }
#preload-02 {latar belakang: url (http: //domain.tld/image-02.png) no-rePeat -9999px -9999px; }
#preload-03 {latar belakang: url (http: //domain.tld/image-03.png) no-rePeat -9999px -9999px; }
Dengan menerapkan ketiga pemilih ID ini ke elemen HTML (x), kita dapat memuat gambar pada latar belakang di luar layar melalui properti latar belakang CSS. Selama jalur gambar -gambar ini tetap sama, browser menggunakan gambar preloaded (cache) selama rendering ketika mereka dipanggil di tempat lain di halaman web. Sederhana, efisien, dan tidak memerlukan JavaScript.
Meskipun metode ini efisien, ada ruang untuk perbaikan. Gambar yang dimuat menggunakan metode ini dimuat bersama dengan konten lain dari halaman, meningkatkan waktu pemuatan keseluruhan halaman. Untuk mengatasi masalah ini, kami menambahkan beberapa kode JavaScript untuk menunda waktu preload sampai halaman dimuat. Kodenya adalah sebagai berikut:
Salinan kode adalah sebagai berikut:
// gambar yang lebih baik preloading @ <a href = "http://perishablepress.com/press/2009/12/28/3-ways-preload-images-cssssss-javascript-Ajax/" http://perishablepress.com/press/2009/12/28/3-ways preloader () {
if (document.geteLementById) {
document.geteLementById ("preload-01"). style.background = "url (http: //domain.tld/image-01.png) no-rePeat -9999px -9999px";
document.geteLementById ("preload-02"). style.background = "url (http: //domain.tld/image-02.png) no-rePeat -9999px -9999px";
document.geteLementById ("preload-03"). style.background = "url (http: //domain.tld/image-03.png) no-rePeat -9999px -9999px";
}
}
function addloadevent (func) {
var oldonload = window.onload;
if (typeof window.onload! = 'function') {
window.onload = func;
} kalau tidak {
window.onload = function () {
if (oldonload) {
oldonload ();
}
func ();
}
}
}
AddLoadEvent (preloader);
Di bagian pertama skrip, kami mengambil elemen menggunakan pemilih kelas dan mengatur properti latar belakang untuk itu untuk memuat gambar yang berbeda.
Di bagian kedua dari skrip ini, kami menggunakan fungsi addloadevent () untuk menunda waktu pemuatan fungsi preloader () sampai halaman dimuat.
Apa yang terjadi jika JavaScript tidak berfungsi dengan baik di browser pengguna? Ini sangat sederhana. Gambar tidak akan dimuat sebelumnya. Ketika halaman memanggil gambar, itu akan ditampilkan secara normal.
Metode 2: Hanya gunakan JavaScript untuk mengimplementasikan preloading
Metode di atas kadang -kadang sangat efisien, tetapi kami secara bertahap menemukan bahwa terlalu banyak waktu dalam implementasi yang sebenarnya. Sebagai gantinya, saya lebih suka menggunakan JavaScript murni untuk preload gambar. Dua metode preloading seperti itu disediakan di bawah ini, yang dapat bekerja dengan indah di semua browser modern.
Segmen Kode JavaScript 1
Mudah diimplementasikan dengan hanya mengedit dan memuat jalur dan nama gambar yang diperlukan:
Salinan kode adalah sebagai berikut:
<div>
<type skrip = "Teks/JavaScript">
<!-//-> <! [Cdata [//> <!-var gambar = array baru ()
fungsi preload () {
untuk (i = 0; i <preload.arguments.length; i ++) {
gambar [i] = gambar baru ()
gambar [i] .src = preload.arguments [i]
}
}
preload (
"http: //domain.tld/gallery/image-001.jpg",
"http: //domain.tld/gallery/image-002.jpg",
"http: //domain.tld/gallery/image-003.jpg"
)
//-> <!]]> </script>
</div>
Metode ini sangat cocok untuk preloading sejumlah besar gambar. Situs web galeri saya menggunakan teknologi ini dan memiliki lebih dari 50 gambar yang dimuat sebelumnya. Terapkan skrip ke halaman login, dan selama pengguna memasukkan akun login, sebagian besar gambar galeri akan dimuat sebelumnya.
Cuplikan JavaScript 2
Metode ini mirip dengan metode di atas, dan juga dapat memuat sejumlah gambar. Tambahkan skrip berikut ke halaman web apa pun dan edit sesuai dengan instruksi program.
Salinan kode adalah sebagai berikut:
<div>
<type skrip = "Teks/JavaScript">
<!-//-> <! [Cdata [///> <!-if (document.images) {
img1 = gambar baru ();
img2 = gambar baru ();
img3 = gambar baru ();
img1.src = "http: //domain.tld/path/to/image-001.gif";
img2.src = "http: //domain.tld/path/to/image-002.gif";
img3.src = "http: //domain.tld/path/to/image-003.gif";
}
//-> <!]]> </script>
</div>
Seperti yang dapat dilihat, setiap pemuatan gambar membutuhkan pembuatan variabel, seperti "img1 = gambar baru ();" dan deklarasi alamat sumber gambar, seperti "img3.src =
"../path/to/image-003.gif"; ". Rujuk ke mode ini, Anda dapat memuat sebanyak mungkin gambar yang Anda inginkan.
Kami telah meningkatkan metode ini lagi. Encapsulate skrip ke dalam fungsi dan gunakan AddLoadEvent () untuk menunda waktu preload sampai halaman dimuat.
Salinan kode adalah sebagai berikut:
function preloader () {
if (document.images) {
var img1 = gambar baru ();
var img2 = gambar baru ();
var img3 = gambar baru ();
img1.src = "http: //domain.tld/path/to/image-001.gif";
img2.src = "http: //domain.tld/path/to/image-002.gif";
img3.src = "http: //domain.tld/path/to/image-003.gif";
}
}
function addloadevent (func) {
var oldonload = window.onload;
if (typeof window.onload! = 'function') {
window.onload = func;
} kalau tidak {
window.onload = function () {
if (oldonload) {
oldonload ();
}
func ();
}
}
}
AddLoadEvent (preloader);
Metode 3: Gunakan AJAX untuk mengimplementasikan preloading
Metode yang diberikan di atas tampaknya tidak cukup keren, jadi sekarang mari kita lihat metode yang menggunakan Ajax untuk mengimplementasikan preloading gambar. Metode ini menggunakan DOM, tidak hanya gambar preloads, tetapi juga preload CSS, JavaScript dan hal -hal terkait lainnya. Menggunakan Ajax lebih baik daripada menggunakan JavaScript secara langsung, keuntungannya adalah pemuatan JavaScript dan CSS tidak akan mempengaruhi halaman saat ini. Metode ini sederhana dan efisien.
Salinan kode adalah sebagai berikut:
window.onload = function () {
setTimeout (function () {
// xhr untuk meminta js dan css var xhr = new xmlhttpRequest ();
xhr.open ('get', 'http: //domain.tld/preload.js');
xhr.send ('');
xhr = xmlhttpRequest baru ();
xhr.open ('get', 'http: //domain.tld/preload.css');
xhr.send ('');
// gambar preload gambar baru (). src = "http: //domain.tld/preload.png";
}, 1000);
};
Kode di atas dimuat dengan "preload.js", "preload.css", dan "preload.png". Batas waktu 1000 milidetik adalah untuk mencegah skrip dari menggantung, yang menyebabkan masalah fungsional pada halaman normal.
Di bawah ini, mari kita lihat cara mengimplementasikan proses pemuatan menggunakan JavaScript:
Salinan kode adalah sebagai berikut:
window.onload = function () {
setTimeout (function () {
// referensi ke <head>
var head = document.geteLementsbyTagname ('head') [0];
// CSS baru
var css = document.createElement ('link');
css.type = "Teks/CSS";
css.rel = "stylesheet";
css.href = "http: //domain.tld/preload.css";
// JS baru
var js = document.createelement ("skrip");
js.type = "Teks/JavaScript";
js.src = "http: //domain.tld/preload.js";
// preload JS dan CSS head.AppendChild (CSS);
head.AppendChild (JS);
// gambar preload
gambar baru (). src = "http: //domain.tld/preload.png";
}, 1000);
};
Di sini, kami membuat tiga elemen melalui DOM untuk mengimplementasikan preloading tiga file. Seperti disebutkan di atas, dengan AJAX, file pemuatan tidak diterapkan ke halaman pemuatan. Dari sudut pandang ini, metode AJAX lebih unggul dari JavaScript.
Oke, artikel ini akan diperkenalkan di sini. Setiap orang telah memahami tiga metode penerapan teknologi preloading gambar. Mana yang lebih efisien? Saya pikir teman juga telah melihatnya, jadi terapkan pada proyek mereka sendiri.