Sample code for how to dynamically change image display size using JavaScript

When we want to display several pictures of different sizes passed from the background, in order to ensure the consistency of the picture size and the coordination of the proportions, we need to dynamically change the picture display size. Through search, we can find the jQuery code that implements this function from the Internet as follows. This code can keep the size of the image within a certain range. If the original size of the image is greater than the max* value, the width of the displayed images will be equal.

$(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); // 设定等比例缩放后的高度
     }
 });
 });

When testing the effect in different browsers, it was found that this writing method cannot be adapted to the Chrome browser, and will cause a bug where the image is displayed in its original size. It turns out that the document ready event starts executing when the HTML document is loaded and the DOM is ready, even if the image resources have not been loaded yet. There is a saying on the Internet that wrapping it with the $(window).load() method can solve the problem of incorrect display in the Chrome browser-----the window load event is executed slightly later, and it is used in the entire page including frames. , execution starts after objects and images are loaded. From this difference, we can analyze that when the Chrome browser does not use the $(window).load() method to process images, the order of execution of the js code for loading images and dynamically changing images is uncertain.

The indoor picture module I am currently working on requires first loading the indoor picture from the background and displaying it on the page. In order to ensure the consistency of the picture size and the coordination of the proportions, it is necessary to dynamically change the picture display size and then adjust the size. The corresponding AP location is displayed on the indoor map. There are three steps here:
1. Send an ajax request, get the URL of the indoor image that needs to be loaded, update the dom, and display the indoor image
2. Dynamically change the image display size
3. Display on the indoor image Corresponding ap position coordinates
At first I did this:
Send an ajax request, dynamically change the image display size in the return success function and send an ajax request to display the corresponding ap position coordinates on the indoor map, the final result The picture is displayed in its original size. The method I adjusted is:
Send an ajax request and return the success function

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

The resulting picture is displayed after dynamically changing the size

The above is the detailed content of Sample code for how to dynamically change image display size using JavaScript. For more information, please follow other related articles on the PHP Chinese website!