Tanpa basa -basi lagi, lihat saja contohnya
Pertama -tama, cara menulis tanda gambar
<img data-src = "/image/image.jpg">
Anda perlu memasukkan alamat gambar ke dalam atribut data-src , dan nilai src tidak diperlukan, sehingga Anda dapat secara langsung menghapus atribut src .
Kode CSS
Untuk semua gambar dengan atribut data-src , kami awalnya akan menampilkan status sebagai tidak terlihat, menyesuaikannya melalui transparansi:
img {opacity: 1; Transisi: opacity 0.3s;} img [data-src] {opacity: 0;}Apa tujuan menulis dengan cara ini? Saat gambar dimuat, Anda akan dapat melihat efeknya.
Kode JavaScript
Kami akhirnya akan menghapus atribut data-src dan menggantinya dengan atribut SRC, tetapi ini adalah tindakan setelah gambar dimuat dengan sukses:
[] .foreach.call (document.queryselectorall ('img [data-src]'), fungsi (img) {img.setAttribute ('src', img.getattribute ('data-src')); img.onload = fungsi () {img.removovibute ('data-src');Dibandingkan dengan berbagai teknologi pemuatan penundaan gambar lainnya, metode ini sangat sederhana. Hampir tidak memerlukan kondisi lain dan dapat digunakan di mana saja. Sangat fleksibel untuk digunakan.
Tetapi harus dicatat bahwa kesederhanaan memiliki yang terbaik atau buruk, dan itu juga tidak cukup karena kesederhanaan. Itu tidak memiliki fungsi menggulir gambar ke jendela visual dan kemudian memuatnya. Teknologi mana yang akan digunakan pada akhirnya tergantung pada skenario.
Di atas adalah semua tentang artikel ini, saya harap ini akan membantu untuk pekerjaan dan belajar semua orang.