Echo.js Pure JavaScript Lyzy Lazy Lazy Loading Kode
Demo
<! Doctype html> <html lang = "zh-cn"> <head> <meta charset = "UTF-8"> <Title> gambar JavaScript sederhana Lazy Loading Library Echo.js </title> <tyle> .demo img {width: 736px; Tinggi: 490px; Latar Belakang: URL (gambar/loading.gif) 50% no-repeat;} </tyle> </head> <body> <h1 style = "margin: 40px; font: 32px microsoft yahei; text-align: center;"> gambar javascript malas lazy library echo. Data-Echo = "Images/Big-1.jpg"> <img src = "images/blank.gif" data-echo = "gambar/Big-2.jpg"> <img src = "gambar/blank.gif" data-echo = "gambar/besar. src="images/blank.gif" data-echo="images/blank.gif" data-echo="images/big-5.jpg"> <img src="images/blank.gif" data-echo="images/big-6.jpg"> <img src="images/blank.gif" data-echo="images/big-7.jpg"></div><script src = "js/echo.min.js"> </script> <script> echo.init ({offset: 0, throttle: 0}); </script>aplikasi
1. Perkenalkan JS dan inisialisasi
<skrip src = "{sh :: pub} js/echo.min.js"> </script> <script> echo.init ({offset: 0, throttle: 0}); </cript>2. Lampirkan atribut ke gambar
<img src = "{sh :: pub} img/common/blank.gif" data-echo = "{sh: $ goods.logoimg}">3. Atur latar belakang default untuk gambar yang tidak diturunkan, gif dinamis
.lazy {width: 100%; tinggi: 100%; latar belakang: url ({sh :: pub} img/common/loading.gif) 50%no-repeat;}Sangat nyaman dan praktis.
Untuk lebih meningkatkan kecepatan membuka halaman web, Anda dapat mengoptimalkan gambar yang diunggah.
Halaman web lambat, tidak lebih dari itu, kueri lambat, gambar dimuat secara perlahan, gambar tidak dimuat dengan penundaan, dan data gambar terlalu besar.
Berdasarkan alasan ini, secara bertahap menyelesaikannya.
Tingkatkan pengalaman pengguna.
Kode contoh di atas untuk pemuatan malas ringan JavaScript murni dari Echo.js adalah seluruh konten yang dibagikan oleh editor. Saya harap ini dapat memberi Anda referensi dan saya harap Anda dapat mendukung wulin.com lebih lanjut.