Bagaimana untuk Mendapatkan Dimensi Imej dalam Penyemak Imbas WebKit?

Menentukan Dimensi Imej dalam Penyemak Imbas Webkit

Apabila membangunkan pemalam JavaScript, mendapatkan lebar dan ketinggian sebenar imej adalah penting. Walaupun kaedah konvensional berfungsi dalam Firefox, IE dan Opera, kaedah tersebut gagal dalam Safari dan Chrome, dengan nilai yang dikembalikan adalah sifar.

Gelagat Pemuatan Imej Unik WebKit

Tidak seperti pelayar lain, Webkit menetapkan sifat ketinggian dan lebar imej hanya selepas ia dimuatkan. Tingkah laku ini memerlukan pendekatan yang berbeza untuk mendapatkan semula dimensi imej sebenar.

利用图片加载事件

Penyelesaian yang disyorkan melibatkan penggunaan acara onload imej. Di bawah ialah coretan kod yang diubah suai yang menyelesaikan isu:

var img = $("img")[0]; // Get the image element
var pic_real_width, pic_real_height;
$("<img/>") // Create an in-memory copy to avoid CSS issues
    .attr("src", $(img).attr("src"))
    .load(function() {
        pic_real_width = this.width;
        pic_real_height = this.height;
    });

Mengelakkan Kesan CSS

Untuk mengelakkan kesan CSS daripada menjejaskan dimensi, kod mencipta in- salinan memori imej. Teknik ini memastikan bahawa nilai yang diperoleh dengan tepat mencerminkan saiz imej sebenar.

Pendekatan Alternatif: Atribut HTML5

HTML5 menyediakan atribut NaturalHeight dan naturalWidth, yang juga boleh digunakan untuk mendapatkan semula dimensi imej sebenar. Walau bagaimanapun, sokongan untuk atribut ini berbeza-beza merentas penyemak imbas.

Atas ialah kandungan terperinci Bagaimana untuk Mendapatkan Dimensi Imej dalam Penyemak Imbas WebKit?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!