So erhalten Sie Bildbreite und -höhe in js

So erhalten Sie die Bildbreite und -höhe in js: 1. Drucken Sie nach dem Laden; 2. Mischen Sie vollständig und laden Sie es zusammen. 3. Erhalten Sie es durch zeitgesteuerte Schleifenerkennung. Der Code lautet [from:check: width:'+img. width+' ,height:'+img.heig].

Die Betriebsumgebung dieses Tutorials: Windows 7-System, JavaScript-Version 1.8.5, DELL G3-Computer.

js-Methode zum Ermitteln der Breite und Höhe des Bildes:

1. Einfache Möglichkeit, das Bild zu erhalten

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

Die Ergebnisse sind wie folgt:

Das Ergebnis sind Breite und Höhe Beide 0 sind normal, da die zugehörigen Daten des Bildes vor dem Laden standardmäßig auf 0 Breite und Höhe eingestellt sind, sodass es auf diese Weise optimiert werden kann!

2. Nach dem Onload ausdrucken

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

Das Ergebnis sieht wie folgt aus:

Sie können die Breite und Höhe des Bildes über Onload ermitteln. Das Laden größerer Bilder ist jedoch normalerweise langsamer und unpraktisch. Solange das Bild jedoch vom Browser zwischengespeichert wird, muss man fast nicht warten, bis das Bild geladen wird. Was wir wollen, ist ein Platzhalter. Manche Leute können also auch so schreiben, wenn sie es aus dem Cache holen.

3. Komplett mischen und zusammen laden

Um den Caching-Effekt zu testen, beachten Sie bitte, dass die URLs der folgenden Testbilder nicht mit einem Zeitstempel versehen sind

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

Die erste Ausführung wird immer ein Onload-Trigger sein

Sie können es noch einmal tun. Die Aktualisierung wird fast immer durch den Cache ausgelöst.

Das Auslesen der Breite und Höhe des Bildes aus dem Cache ist natürlich sehr bequem und schnell. Was wir heute lösen möchten, ist, es einzufügen Ein schnellerer und schnellerer Weg ohne Cache als Onload. Die Breite und Höhe des Bildes. Wir wissen oft, dass einige Bilder zwar nicht vollständig heruntergeladen sind, aber bereits Platzhalter haben und dann nach und nach geladen werden. Da es einen Platzhalter gibt, sollte dieser zurückgegeben werden, nachdem eine Antwort vom Bildressourcenserver angefordert wurde. Wenn der Server jedoch antwortet und die Breiten- und Höhendaten zurückgibt, wird kein Ereignis ausgelöst, beispielsweise das Onload-Ereignis. So wurde die vierte Methode geboren

4. Erhalten Sie durch zeitgesteuerte Schleifenerkennung

Sehen Sie sich das folgende Beispiel an, um das Lesen von Daten aus dem Cache zu vermeiden:

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

Empfohlene Studie: „ JavaScript-Video Tutorial》

Das obige ist der detaillierte Inhalt vonSo erhalten Sie Bildbreite und -höhe in js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!