méthode js pour obtenir les compétences en largeur d'image et en hauteur_javascript

Cet article partage une variété de méthodes JS pour obtenir la largeur et la hauteur des images, et les analyse à travers des exemples. J'espère que vous pourrez en tirer quelque chose.

1. Un moyen simple d'obtenir des photos

// 图片地址 后面加时间戳是为了避免缓存
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);

Les résultats sont les suivants :

Le résultat que la largeur et la hauteur sont toutes deux 0 est normal, car la largeur et la hauteur de l'image sont 0 par défaut avant le chargement des données pertinentes de l'image, elle peut donc être optimisée comme ça !

2. Imprimer après le chargement

// 图片地址 后面加时间戳是为了避免缓存
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);
};

Les résultats sont les suivants

Vous pouvez obtenir la largeur et la hauteur de l'image via onload. Cependant, le chargement d'images plus grandes est généralement lent et peu pratique. Cependant, tant que l'image est mise en cache par le navigateur, il n'est presque pas nécessaire d'attendre que l'image se charge pour déclencher le chargement. Ainsi, certaines personnes peuvent également écrire comme ceci lorsqu'elles l'obtiennent du cache.

3. Utilisez complet et chargez ensemble
Afin de tester l'effet de mise en cache, veuillez noter que les URL des images de test suivantes n'incluent pas d'horodatage

// 图片地址
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);
 };
}

La première exécution sera toujours déclenchée par onload

Si vous actualisez à nouveau, ce sera presque toujours le cache est déclenché

Inutile de dire que lire la largeur et la hauteur de l'image à partir du cache est très pratique et rapide. Ce que nous allons résoudre aujourd'hui, c'est obtenir la largeur et la hauteur de l'image de plus en plus rapidement que lors du chargement sans. cache. Nous savons souvent que même si certaines images ne sont pas entièrement téléchargées, elles comportent déjà des espaces réservés et sont ensuite chargées petit à petit. Puisqu'il existe un espace réservé, il doit être renvoyé après avoir demandé une réponse au serveur de ressources d'image. Mais lorsque le serveur répond et renvoie les données de largeur et de hauteur, aucun événement n'est déclenché, comme l'événement onload. Cela a donné naissance à la quatrième méthode

4.Obtenir grâce à la détection de boucle chronométrée
Regardez l'exemple suivant. Afin d'éviter de lire les données du cache, chaque requête est horodatée :

// 图片地址
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

Grâce aux tests ci-dessus, nous avons constaté que la méthode de détection régulière de la largeur et de la hauteur de l'image est beaucoup plus rapide que le chargement. Plus il y a de lignes imprimées, plus le temps de chargement est long. S'il est exécuté une fois toutes les 40 millisecondes, la largeur de l'image peut être obtenue en 100 millisecondes. Élevé, Chrome obtient déjà les données dès la première boucle. À partir de l'analyse des données ci-dessus, nous pouvons en fait juger dans la fonction de synchronisation que tant que la largeur et la hauteur de l'image sont supérieures à 0, cela signifie que la largeur et la hauteur correctes de l'image ont été obtenues. Marquons le temps pour voir combien de temps il faut pour obtenir la largeur et la hauteur via le timing ou le chargement.

// 记录当前时间戳
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

Il s'agit d'une image de taille 2560 * 1600. Les résultats d'exécution de chaque navigateur peuvent être vus. La méthode pour obtenir rapidement la taille de l'image est de presque 200 millisecondes, et le chargement dure au moins cinq secondes. est rapide. Il est très pratique d'obtenir la largeur et la hauteur de l'image.

A travers un grand nombre d'exemples, nous avons analysé et comparé les avantages et les inconvénients des différentes méthodes d'obtention de la largeur et de la hauteur de l'image à l'aide de js. J'espère que vous ferez un choix judicieux en fonction de vos besoins.