Contoh kod JavaScript untuk mendapatkan saiz sebenar kemahiran picture_javascript

Saiz imej pada halaman web semuanya kelihatan sama. Dalam halaman artikel yang paling kerap kita lihat dengan berbilang gambar, saiz gambar biasanya sama dengan lebar halaman Dengan cara ini, halaman kelihatan seperti silinder lurus Jika anda melihat susun atur ini terlalu banyak terasa sangat monoton. Sebab untuk keadaan ini, saya fikir, sebahagian besarnya disebabkan oleh batasan pelayar lama. Walau bagaimanapun, dengan populariti pelayar moden (Firefox/Google/IE11), penyemak imbas mempunyai semakin sedikit sekatan pada reka bentuk halaman, dan imaginasi pengaturcara Web boleh digunakan dengan banyak.

Contohnya, trivia: Adakah anda tahu dari mana datangnya [x] dalam setiap tetingkap? Dalam artikel ini, banyak gambar melebihi had lebar teks, memberikan orang rasa tidak sekata Pada masa yang sama, membenarkan gambar besar dipaparkan dalam saiz sebenar memberikan orang perasaan yang lebih mengejutkan.

Tetapi secara teknikal, kita boleh mengehadkan imej dengan mudah dengan lebar maksimum teks, supaya mereka semua mengekalkan lebar yang sama daripada menekan lebar teks, kita memerlukan setiap imej untuk mempunyai saiznya sendiri. Kami boleh mengisytiharkan saiz asal imej apabila mengedit di bahagian pelayan. Cara yang lebih fleksibel ialah mendapatkan saiz asal imej secara dinamik dengan meletakkan sekeping js pada halaman dan menukar saiz paparan imej secara dinamik. Ini bukan sahaja serasi dengan kaedah lama untuk memaksimumkan lebar teks, tetapi juga membolehkan imej memaparkan saiz asalnya apabila diperlukan.

Bagaimana untuk mendapatkan saiz asal imej pada sisi penyemak imbas menggunakan JavaScript?

Salin kod Kod adalah seperti berikut:

var img = $(“#img_id”); // Dapatkan elem img saya
var pic_real_width, pic_real_height;
$(“”) // Buat salinan memori imej untuk mengelakkan isu css
.attr(“src”, $(img).attr(“src”))
.load(function() {
pic_real_width = this.width; // Nota: $(this).width() tidak akan
pic_real_height = this.height; // berfungsi untuk dalam imej memori.
});

Pelayar webkit (Google Chrome, dsb.) hanya boleh mendapatkan nilai ketinggian dan lebar selepas peristiwa imej dimuatkan. Oleh itu, anda tidak boleh menggunakan fungsi tamat masa untuk menangguhkan menunggu Cara terbaik ialah menggunakan acara onload imej.

Untuk mengelakkan kesan CSS pada saiz imej, kod di atas menyalin imej ke dalam memori untuk pengiraan.

Jika halaman anda adalah halaman lama, anda boleh membenamkan kod ini di bahagian bawah halaman mengikut keperluan. Ia tidak memerlukan anda mengubah suai halaman asal.