Bagaimana untuk mendapatkan ketinggian dan lebar imej menggunakan kemahiran JS

Bagaimana untuk mendapatkan ketinggian dan lebar imej menggunakan kemahiran JS_javascript

WBOY

Lepaskan： 2016-05-16 16:03:13

asal

1202 orang telah melayarinya

Secara amnya, cara untuk mendapatkan ketinggian dan lebar imej ialah:

Salin kod Kod adalah seperti berikut:

var img = Imej baharu();

img.src = imgsrc;

var imgWH = CalcImgTiple(img.width, img.height);

Tetapi ia tidak boleh diperolehi apabila diuji dalam krom. img.width, img.height kedua-duanya 0

Punca: Apabila gambar itu bukan gambar tempatan, tetapi gambar rangkaian
pengendali acara onload dipanggil apabila imej berjaya dimuatkan.

Semasa melakukan pembangunan web, terdapat keperluan: gunakan Javascript untuk mendapatkan saiz imej yang akan dimuatkan, jadi secara semula jadi, saya memikirkan kaedah onload img Selepas menyelesaikan pembangunan di bawah firefox, saya pergi ke IE nyahpepijat dan mendapati bahawa acara onload img tidak dipanggil dalam banyak kes.

Kod asal adalah seperti berikut:

Salin kod Kod adalah seperti berikut:

var img = Imej baharu;

img.src = "test.gif";

img.onload = function(){

makluman (img.width);

};

Kod ini kelihatan baik, tetapi mengapa onload tidak dipanggil oleh IE? Kerana IE cache imej, imej yang dimuatkan untuk kali kedua tidak dimuat naik daripada pelayan, tetapi dimuatkan daripada penimbal. Bukankah peristiwa onload mencetuskan imej yang dimuatkan daripada penimbal? Jadi saya menguji kod berikut dan ia berfungsi~

Salin kod Kod adalah seperti berikut:

var img = Imej baharu;

img.onload = function(){

makluman ( img.width };

img.src = "test.gif";

Tulis onload ke hadapan, mula-mula beritahu penyemak imbas cara memproses imej ini, dan kemudian nyatakan sumber imej ini, ini akan menjadi perkara biasa. Oleh itu, bukan kerana IE tidak mencetuskan peristiwa onload, tetapi kerana penimbal dimuatkan dengan begitu pantas sehingga peristiwa onload telah pun dicetuskan sebelum img.onload dijalankan. Ini mengingatkan saya kepada Ajax Apabila menulis xmlhttp, kami sentiasa menentukan fungsi panggil balik onstatechange dahulu, dan kemudian menghantar datanya

Di atas adalah keseluruhan kandungan artikel ini, saya harap anda semua menyukainya.