js untuk mendapatkan kemahiran lebar dan height_javascript imej

Artikel ini berkongsi pelbagai kaedah JS untuk mendapatkan lebar dan ketinggian imej, dan menganalisisnya melalui contoh.

1. Cara mudah untuk mendapatkan gambar

// 图片地址 后面加时间戳是为了避免缓存
var img_url = ‘upload/2013/13643608813441.jpg?'+Date.parse(new Date());
 
// 创建对象
var img = new Image();
 
// 改变图片的src
img.src = img_url;
 
// 打印
alert('width:'+img.width+',height:'+img.height);

Keputusan adalah seperti berikut:

Hasil bahawa lebar dan tinggi kedua-duanya 0 adalah normal, kerana lebar dan tinggi imej adalah 0 secara lalai sebelum data yang berkaitan imej dimuatkan, jadi ia boleh dioptimumkan seperti ini!

2. Cetak selepas dimuatkan

// 图片地址 后面加时间戳是为了避免缓存
var img_url = 'upload/2013/13643608813441.jpg?'+Date.parse(new Date());
 
// 创建对象
var img = new Image();
 
// 改变图片的src
img.src = img_url;
 
// 加载完成执行
img.onload = function(){
 // 打印
 alert('width:'+img.width+',height:'+img.height);
};

Keputusan adalah seperti berikut

Anda boleh mendapatkan lebar dan ketinggian imej melalui onload. Walau bagaimanapun, memuatkan imej yang lebih besar biasanya lambat dan tidak praktikal Walau bagaimanapun, selagi imej dicache oleh penyemak imbas, hampir tidak perlu menunggu imej dimuatkan untuk mencetuskan pemuatan. Jadi sesetengah orang juga boleh menulis seperti ini apabila mendapatkannya dari cache.

3 Gunakan lengkap dan onload bersama
Untuk menguji kesan caching, sila ambil perhatian bahawa URL imej ujian berikut tidak termasuk cap masa

// 图片地址
var img_url = 'upload/2013/13643608813441.jpg';
 
// 创建对象
var img = new Image();
 
// 改变图片的src
img.src = img_url;
 
// 判断是否有缓存
if(img.complete){
 // 打印
 alert('from:complete : width:'+img.width+',height:'+img.height);
}else{
 // 加载完成执行
 img.onload = function(){
 // 打印
 alert('from:onload : width:'+img.width+',height:'+img.height);
 };
}

Pelaksanaan pertama akan sentiasa dicetuskan oleh onload

Jika anda memuat semula semula, hampir selalu akan cache dicetuskan

Tidak perlu dikatakan, membaca lebar dan ketinggian imej dari cache adalah sangat mudah dan pantas Apa yang akan kami selesaikan hari ini adalah untuk mendapatkan lebar dan ketinggian imej dengan cara yang lebih cepat dan lebih cepat daripada onload tanpa beban. cache. Kita sering mengetahui bahawa walaupun sesetengah gambar tidak dimuat turun sepenuhnya, ia sudah mempunyai ruang letak dan kemudian dimuatkan sedikit demi sedikit. Memandangkan terdapat ruang letak, ia harus dikembalikan selepas meminta respons daripada pelayan sumber imej. Tetapi apabila pelayan bertindak balas dan mengembalikan data lebar dan ketinggian, tiada peristiwa dicetuskan, seperti peristiwa onload. Ini menimbulkan kaedah keempat

4. Dapatkan melalui pengesanan gelung bermasa
Lihat contoh berikut Untuk mengelakkan membaca data daripada cache, setiap permintaan ditanda masa:

// 图片地址
var img_url = 'upload/2013/13643608813441.jpg?'+Date.parse(new Date());
 
// 创建对象
var img = new Image();
 
// 改变图片的src
img.src = img_url;
 
// 定时执行获取宽高
var check = function(){
 document.body.innerHTML += '
from:check : width:'+img.width+',height:'+img.height+'
';
};
 
var set = setInterval(check,40);
 
// 加载完成获取宽高
img.onload = function(){
 document.body.innerHTML += '
from:onload : width:'+img.width+',height:'+img.height+'
';
 
 // 取消定时获取宽高
 clearInterval(set);
};

FireFox

IE7 8 9 10

Chrome

Melalui ujian di atas, kami mendapati bahawa kaedah pengesanan lebar dan ketinggian imej secara kerap adalah lebih cepat daripada onload Lebih banyak baris yang dicetak, lebih lama masa onload jika ia dilaksanakan sekali setiap 40 milisaat. lebar imej boleh diperolehi pada asasnya 100 milisaat Tinggi, Chrome sudah mendapat data walaupun pada gelung pertama. Daripada analisis data di atas, sebenarnya kita boleh menilai dalam fungsi pemasaan bahawa selagi lebar dan tinggi gambar lebih besar daripada 0, bermakna lebar dan tinggi gambar yang betul telah diperolehi. Mari kita tandai masa untuk melihat berapa banyak masa yang diperlukan untuk mendapatkan lebar dan ketinggian melalui pemasaan atau onload.

// 记录当前时间戳
var start_time = new Date().getTime();
 
// 图片地址
var img_url = 'http://b.zol-img.com.cn/desk/bizhi/image/2/2560x1600/1365477614755.jpg?'+start_time;
 
// 创建对象
var img = new Image();
 
// 改变图片的src
img.src = img_url;
 
// 定时执行获取宽高
var check = function(){
 // 只要任何一方大于0
 // 表示已经服务器已经返回宽高
 if(img.width>0 || img.height>0){
 var diff = new Date().getTime() - start_time;
 document.body.innerHTML += '
from:check : width:'+img.width+',height:'+img.height+', time:'+diff+'ms
';
 clearInterval(set);
 }
};
 
var set = setInterval(check,40);
 
// 加载完成获取宽高
img.onload = function(){
 var diff = new Date().getTime() - start_time;
 document.body.innerHTML += 'from:onload : width:'+img.width+',height:'+img.height+', time:'+diff+'ms';
};

FireFox:

IE

Chrome

Ini ialah imej bersaiz 2560 * 1600 Hasil pelaksanaan setiap penyemak imbas boleh dilihat Kaedah mendapatkan saiz imej dengan cepat hampir dalam 200 milisaat, dan onload adalah sekurang-kurangnya lima saat adalah pantas. Sangat praktikal untuk mendapatkan lebar dan ketinggian imej.

Melalui sejumlah besar contoh, kami telah menganalisis dan membandingkan kebaikan dan keburukan pelbagai kaedah mendapatkan lebar dan ketinggian imej menggunakan js. Saya harap anda akan membuat pilihan yang teliti mengikut keperluan anda.