Comment obtenir la largeur et la hauteur de l'image en js

Comment obtenir la largeur et la hauteur de l'image en utilisant js : 1. Imprimer après le chargement ; 2. Utiliser complete et onload mélangés ensemble ; 3. Obtenir grâce à la détection de boucle chronométrée, le code est [from:check : largeur : '+ img.width+', hauteur : '+img.heig].

L'environnement d'exploitation de ce tutoriel : système Windows 7, JavaScript version 1.8.5, ordinateur DELL G3.

Méthode JS pour obtenir la largeur et la hauteur de l'image :

Méthode simple pour obtenir des images

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

Le résultat selon lequel la largeur et la hauteur sont toutes deux égales à 0 est normal, car la largeur et la hauteur de l'image sont 0 par défaut avant les données pertinentes de l'image est chargé, il peut donc être optimisé comme ça !

2. Après le chargement, imprimez

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

et le résultat est le suivant

Vous pouvez obtenir le image via onload Plus large et plus grand. Cependant, le chargement d'images plus grandes est généralement plus 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 complete et onload ensemble

Afin de tester l'effet de mise en cache, veuillez noter que les URL des images de test suivantes n'ajoutent 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);
 };
}

Lorsqu'il est exécuté pour la première fois, le onload est toujours déclenché

et lorsque vous le rafraîchissez, il est presque toujours déclenché par le cache

de Inutile de dire qu'il est très pratique et rapide de lire la largeur et la hauteur de l'image dans le cache. Ce que nous allons résoudre aujourd'hui, c'est d'obtenir la largeur et la hauteur de l'image. un moyen de plus en plus rapide que le chargement sans mise en 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. Avec horodatage :

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

Apprentissage recommandé : "Tutoriel vidéo JavaScript"

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!