Kod JQuery Run Setelah Muat Imej

3 Coretan kod jquery mudah untuk menunggu imej dimuat sebelum menjalankan beberapa kod. Satu -satunya kelemahan ialah anda perlu membekalkan nama imej (termasuk lanjutan).

Soalan Lazim (Soalan Lazim) Mengenai Beban Imej JQuery

Apakah acara jQuery .load () dan bagaimana ia berfungsi? Acara ini amat berguna apabila anda ingin melakukan tindakan tertentu hanya selepas imej telah dimuatkan sepenuhnya. Sebagai contoh, anda mungkin mahu memaparkan animasi pemuatan sehingga imej dimuatkan sepenuhnya, dan kemudian menyembunyikan animasi. Acara .load () menjadikan ini mungkin. Adalah penting untuk diperhatikan bahawa acara .load () tidak berfungsi secara konsisten dengan semua elemen di semua pelayar. Ia berfungsi dengan baik dengan unsur -unsur yang mempunyai atribut SRC, seperti imej.

Bagaimana saya boleh menggunakan jQuery untuk mengesan apabila imej telah dimuatkan? Berikut adalah contoh yang mudah:

<span>$('#myImage').attr('src', 'image.jpg').load(function() {  
</span>	<span>//run code
</span>	<span>alert('Image Loaded');  
</span><span>});</span>

$ ('img'). Beban (fungsi () {

// kod anda di sini

}); menembak. Salah satu sebab yang sama adalah bahawa imej yang anda cuba sasaran telah dimuatkan sebelum skrip anda berjalan. Ini boleh berlaku jika skrip anda terletak di kepala dokumen HTML anda, dan imejnya terletak di dalam badan. Untuk mengelakkan ini, anda boleh meletakkan skrip anda pada akhir badan, atau menggunakan fungsi $ (dokumen). Ready () untuk memastikan skrip anda hanya berjalan selepas keseluruhan halaman telah dimuatkan. Walau bagaimanapun, penting untuk diperhatikan bahawa acara .load () tidak berfungsi secara konsisten dengan semua elemen di semua pelayar. Ia berfungsi dengan baik dengan unsur -unsur seperti imej.

Bagaimana saya boleh mengendalikan kesilapan dengan acara .load () dalam jQuery?

Anda boleh mengendalikan kesilapan dengan acara .load () dengan menggunakan acara .error (). Acara ini mencetuskan fungsi apabila ralat berlaku semasa memuatkan elemen. Berikut adalah contoh:

$ ('img'). Error (function () { // Kod anda di sini
});

Adakah mungkin untuk menggunakan acara .load () dengan imej cache? Walau bagaimanapun, perlu diingat bahawa jika imej di -cache, ia mungkin dimuatkan sebelum skrip anda berjalan. Untuk mengendalikan ini, anda boleh menyemak sama ada imej selesai menggunakan harta benda. Jika ia selesai, anda boleh menjalankan fungsi anda dengan segera. Jika tidak, anda boleh menggunakan acara .load (). Kaedah .promise () mengembalikan janji yang menyelesaikan apabila semua tindakan jenis tertentu yang terikat pada koleksi, beratur atau tidak, telah berakhir. Acara .load () boleh digunakan untuk menjalankan fungsi apabila permintaan AJAX selesai. Ini berguna jika anda ingin melakukan tindakan selepas data telah dimuatkan dari pelayan.

Bagaimana saya boleh menggunakan acara .load () untuk memuatkan data dari pelayan? Ini akan menghantar permintaan AJAX ke pelayan, dan memuatkan data ke dalam elemen yang dipilih. Adalah disyorkan untuk menggunakan kaedah .on () sebaliknya untuk melampirkan pengendali acara.

Atas ialah kandungan terperinci Kod JQuery Run Setelah Muat Imej. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!