js-Methode, um Bildbreite und -höhe zu erhalten_Javascript-Kenntnisse

In diesem Artikel werden verschiedene JS-Methoden zum Ermitteln der Breite und Höhe von Bildern beschrieben und anhand von Beispielen analysiert. Ich hoffe, Sie können daraus etwas gewinnen.

1. Einfache Möglichkeit, Bilder 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, dass Breite und Höhe beide 0 sind, ist normal, da die Breite und Höhe des Bildes standardmäßig 0 sind, bevor die relevanten Daten des Bildes geladen werden, sodass es auf diese Weise optimiert werden kann!

2. Nach dem Laden drucken

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

Die Ergebnisse sind wie folgt

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

3. Komplett und onload zusammen verwenden
Um den Caching-Effekt zu testen, beachten Sie bitte, dass die URLs der folgenden Testbilder keine Zeitstempel enthalten

// 图片地址
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 durch Onload ausgelöst

Wenn Sie erneut aktualisieren, wird fast immer Cache ausgelöst

Es versteht sich von selbst, dass das Lesen der Breite und Höhe des Bildes aus dem Cache sehr bequem und schnell ist. Was wir heute lösen werden, ist, die Breite und Höhe des Bildes immer schneller zu ermitteln als beim Laden ohne Cache. 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. Daraus entstand die vierte Methode

4. Erhalten durch zeitgesteuerte Schleifenerkennung
Sehen Sie sich das folgende Beispiel an: Um das Lesen von Daten aus dem Cache zu vermeiden, wird jede Anfrage mit einem Zeitstempel versehen:

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

Chrom

Durch die oben genannten Tests haben wir festgestellt, dass die Methode zur regelmäßigen Erkennung der Breite und Höhe des Bildes viel schneller ist als die Onload-Zeit. Je mehr Zeilen gedruckt werden, desto länger ist die Onload-Zeit. Die Breite des Bildes kann grundsätzlich in 100 Millisekunden ermittelt werden. Chrome erhält die Daten bereits in der ersten Schleife. Aus der Analyse der obigen Daten können wir in der Zeitfunktion tatsächlich beurteilen, dass, solange die Breite und Höhe des Bildes größer als 0 ist, die richtige Bildbreite und -höhe erhalten wurde. Markieren wir die Zeit, um zu sehen, wie viel Zeit benötigt wird, um die Breite und Höhe durch Timing oder Onload zu erhalten.

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

Chrom

Dies ist ein Bild mit einer Größe von 2560 * 1600. Die Methode zum schnellen Abrufen der Bildgröße beträgt mindestens fünf Sekunden ist sehr praktisch, um die Breite und Höhe des Bildes zu ermitteln.

Anhand zahlreicher Beispiele haben wir die Vor- und Nachteile verschiedener Methoden zur Ermittlung der Bildbreite und -höhe mithilfe von js analysiert und verglichen. Ich hoffe, Sie treffen eine sorgfältige Auswahl entsprechend Ihren Anforderungen.