Beispielcode zum dynamischen Ändern der Bildanzeigegröße mithilfe von JavaScript

Wenn wir mehrere vom Hintergrund übertragene Bilder unterschiedlicher Größe anzeigen möchten, müssen wir die Bildanzeigegröße dynamisch ändern, um die Konsistenz der Bildgröße und die Koordination der Proportionen sicherzustellen. Durch die Suche können wir den jQuery-Code, der diese Funktion implementiert, wie folgt aus dem Internet finden. Dieser Code kann die Größe des Bildes innerhalb eines bestimmten Bereichs halten. Wenn die Originalgröße des Bildes größer als der maximale*-Wert ist, ist die Breite des angezeigten Bildes gleich.

$(document).ready(function() {
     $('.post img').each(function() {
     var maxWidth = 100; // 图片最大宽度
     var maxHeight = 100; // 图片最大高度
     var ratio = 0; // 缩放比例
     var width = $(this).width(); // 图片实际宽度
     var height = $(this).height(); // 图片实际高度
   
     // 检查图片是否超宽
     if(width > maxWidth){
         ratio = maxWidth / width; // 计算缩放比例
         $(this).css("width", maxWidth); // 设定实际显示宽度
         height = height * ratio; // 计算等比例缩放后的高度 
         $(this).css("height", height); // 设定等比例缩放后的高度
     }
   
     // 检查图片是否超高
     if(height > maxHeight){
         ratio = maxHeight / height; // 计算缩放比例
         $(this).css("height", maxHeight); // 设定实际显示高度
         width = width * ratio; // 计算等比例缩放后的高度
         $(this).css("width", width * ratio); // 设定等比例缩放后的高度
     }
 });
 });

Beim Testen des Effekts in verschiedenen Browsern wurde festgestellt, dass diese Schreibmethode nicht an den Chrome-Browser angepasst werden kann und einen Fehler verursacht, bei dem das Bild in Originalgröße angezeigt wird. Es stellt sich heraus, dass das Ereignis „Dokument bereit“ mit der Ausführung beginnt, wenn das HTML-Dokument geladen und das DOM bereit ist, auch wenn die Bildressourcen noch nicht geladen wurden. Im Internet gibt es ein Sprichwort, dass das Umschließen mit der Methode $(window).load() das Problem der falschen Anzeige im Chrome-Browser lösen kann. Das Fensterladeereignis wird etwas später ausgeführt und verwendet In der gesamten Seite einschließlich Frames beginnt die Ausführung, nachdem Objekte und Bilder geladen wurden. Anhand dieses Unterschieds können wir analysieren, dass die Ausführungsreihenfolge des js-Codes zum Laden von Bildern und zum dynamischen Ändern von Bildern ungewiss ist, wenn der Chrome-Browser die Methode $(window).load() nicht zum Verarbeiten von Bildern verwendet.

Das Innenbildmodul, an dem ich gerade arbeite, erfordert, dass das Innenbild aus dem Hintergrund geladen und auf der Seite angezeigt wird, um die Konsistenz der Bildgröße und die Abstimmung der Proportionen des Bildes sicherzustellen Die Anzeigegröße muss dynamisch geändert und dann angepasst werden. Der entsprechende AP-Standort wird auf der Indoor-Karte angezeigt. Hier gibt es drei Schritte:
1. Senden Sie eine Ajax-Anfrage, rufen Sie die URL des Innenbilds ab, das geladen werden muss, aktualisieren Sie den Dom und zeigen Sie das Innenbild an
2. Ändern Sie die Bildanzeigegröße dynamisch
3. Anzeige der entsprechenden AP-Positionskoordinaten auf dem Innenbild
Zuerst habe ich Folgendes getan:
Senden Sie eine Ajax-Anfrage, ändern Sie die Bildanzeigegröße dynamisch in der Return-Erfolgsfunktion und senden Sie eine Ajax-Anfrage, um die anzuzeigen Entsprechende AP-Positionskoordinaten auf der Indoor-Karte, das Endergebnis. Das Bild wird in seiner Originalgröße angezeigt. Meine Anpassungsmethode ist:
Senden Sie eine Ajax-Anfrage und geben Sie die Erfolgsfunktion zurück

var img= new Image();
    img.src = url;
    img.onload = function(){
    // 需要执行的程序
         动态改变图片实现尺寸并发送ajax请求在室内图上显示对应的ap位置坐标
    }

Das Das resultierende Bild wird nach dynamischer Änderung der Größe angezeigt

Das obige ist der detaillierte Inhalt vonBeispielcode zum dynamischen Ändern der Bildanzeigegröße mithilfe von JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!