Artikel ini menjelaskan metode mewujudkan pemuatan penundaan gambar di JavaScript asli. Pemuatan gambar yang tertunda sebenarnya memiliki plug-in jQuery, dan metode pemuatannya sangat sederhana dan masuk akal. Namun, beberapa teman berpikir bahwa memuat paket plug-in jQuery terlalu besar, jadi saya menulis satu sendiri untuk membaginya dengan Anda.
Pertama -tama, pemuatan penundaan gambar dapat menyimpan bandwidth kami dan mendapatkan pengalaman pengguna yang lebih baik, terutama untuk situs dengan banyak gambar, yang sangat penting. Izinkan saya mendiskusikan prinsip dan kode implementasi pemuatan penundaan gambar dengan Anda di bawah ini.
Prinsip pemuatan penundaan gambar
Prinsip pemuatan penundaan gambar adalah bahwa gambar SRC di HTML tidak diisi dalam alamat gambar nyata, tetapi alamat gambar ditetapkan ke tag IMG dengan atribut khusus, seperti: src = "img/loading.gif" data-url = "img/1.jpg", dan kemudian menilai acara scrollbar browser. Saat mencapai titik tertentu, alamat nyata gambar dalam atribut khusus ditetapkan ke SRC dari tag IMG saat ini, sehingga mewujudkan tampilan dinamis gambar. Dalam proyek nyata, alamat gambar ini dapat dilewati melalui AJAX dan ditugaskan ke properti khusus IMG.
JS asli mengimplementasikan contoh penundaan pemuatan gambar:
Konten teks terlihat agak membosankan. Saya menulis demo sederhana dan sekarang memposting semua kode. Teman yang membutuhkannya dapat menyalinnya secara langsung dan kemudian Anda akan mengerti setelah melihat kode.
Salin kode sebagai berikut: <! Doctype html>
<Html>
<head>
<meta http-equiv = "konten tipe" content = "text/html; charset = utf-8">
<iteme> Image Delay Loading </iteme>
<tyle>
img {display: block; lebar: 350px; tinggi: 245px; latar belakang: url (img/loading.gif) tengah pusat tanpa-repeat}
</tyle>
</head>
<body>
<Div id = "Div">
<img src = "" data-url = "img/11.jpg"> <br>
<img src = "" data-url = "img/11.jpg"> <br>
<img src = "" data-url = "img/11.jpg"> <br>
<img src = "" data-url = "img/11.jpg"> <br>
<img src = "" data-url = "img/11.jpg"> <br>
<img src = "" data-url = "img/11.jpg"> <br>
<img src = "" data-url = "img/11.jpg"> <br>
<img src = "" data-url = "img/11.jpg"> <br>
<img src = "" data-url = "img/11.jpg"> <br>
<img src = "" data-url = "img/11.jpg"> <br>
<img src = "" data-url = "img/11.jpg"> <br>
<img src = "" data-url = "img/11.jpg"> <br>
<img src = "" data-url = "img/11.jpg"> <br>
<img src = "" data-url = "img/11.jpg"> <br>
<img src = "" data-url = "img/11.jpg"> <br>
<img src = "" data-url = "img/11.jpg"> <br>
<img src = "" data-url = "img/11.jpg"> <br>
<img src = "" data-url = "img/11.jpg"> <br>
<img src = "" data-url = "img/11.jpg"> <br>
<img src = "" data-url = "img/11.jpg"> <br>
<img src = "" data-url = "img/11.jpg"> <br>
<img src = "" data-url = "img/11.jpg"> <br>
<img src = "" data-url = "img/11.jpg"> <br>
<img src = "" data-url = "img/11.jpg"> <br>
</div>
<type skrip = "Teks/JavaScript">
var obj = document.geteLementById ("div"). GetElementsByTagname ("img"),
h = window.innerheight || document.documentelement.clientHeight;
untuk (var i = 0; i <obj.length; i ++) {
obj [i] .url = obj [i] .getAttribute ("data-url");
obj [i] .top = obj [i]. OFFSETTOP;
obj [i] .flag = true; // Cegah browser dari memuat gambar sepanjang waktu, sehingga setelah gambar berhasil dimuat, gambar tidak akan dimuat ketika browser digulir;
}
var fnload = function (obj) {
var t = document.body.scrolltop || document.documentelement.scrolltop;
if (t+h> obj.top+200 && obj.top> t) {// Berikan 200 untuk meningkatkan status pemuatan pengguna, itu lebih ramah
setTimeout (function () {
obj.src = obj.url;
obj.flag = false;
}, 500)
}
}
window.onscroll = window.onload = function () {
untuk (var i = 0; i <obj.length; i ++) {
if (obj [i] .flag) {
fnload (obj [i]);
}
}
}
</script>
</body>
</html>
Saya harap artikel ini akan membantu pemrograman JavaScript semua orang.