Rumah >hujung hadapan web >tutorial js >Kaedah javascript asli untuk melaksanakan pemuatan tertunda kemahiran images_javascript

Kaedah javascript asli untuk melaksanakan pemuatan tertunda kemahiran images_javascript

WBOYasal: 2016-05-16 16:25:121140semak imbas

Contoh dalam artikel ini menerangkan cara melaksanakan pemuatan tertunda imej menggunakan javaScript asli. Pemuatan tertunda imej sebenarnya mempunyai pemalam jquery, dan kaedah pemuatan adalah sangat mudah dan munasabah Walau bagaimanapun, sesetengah rakan merasakan bahawa memuatkan pakej pemalam jquery adalah terlalu besar, jadi Yu Shi menulis sendiri dan berkongsi dengan anda. .

Pertama sekali, pemuatan tertunda imej boleh menjimatkan lebar jalur kami dan memberikan pengalaman pengguna yang lebih baik, terutamanya untuk tapak yang mempunyai banyak imej. Ini adalah sangat penting.

Prinsip pemuatan imej tertunda

Prinsip pemuatan tertunda imej ialah imej src dalam HTML bukanlah alamat imej sebenar, tetapi alamat imej diberikan kepada teg img dengan atribut tersuai, seperti: src="img/loading.gif ” data-url=”img/1.jpg”, dan kemudian gunakan js untuk menentukan acara bar skrol penyemak imbas Apabila mencapai titik tertentu, tetapkan alamat sebenar imej dalam atribut tersuai kepada src teg img semasa. , dengan itu merealisasikan pemprosesan imej yang dinamik. Dalam projek sebenar, alamat imej ini boleh dihantar melalui ajax dan diberikan kepada atribut tersuai img.

Contoh pemuatan imej tertunda menggunakan JS asli:

Kandungan teks kelihatan agak membosankan selepas semua saya menulis demo yang mudah dan kini menyiarkan semua kod yang memerlukannya boleh menyalinnya terus dan memahaminya selepas melihat kod tersebut.

Salin kod Kod adalah seperti berikut:

图片延迟加载

img{display:block;width:350px;height:245px;background:url(img/loading.gif) pusat pusat tiada ulangan}