jquery中的javascript图像大小调整

javascript image resizing in jquery

本文关键字：调整 图像 中的 javascript jquery      更新时间：2023-09-26

我发现了一个用于动态调整图像大小以适应此处特定宽度的脚本。我为自己的网络应用程序修改了它，它在很大程度上起作用，但由于某种原因，当图像确实有比我想要的更大的宽度时，该函数有时会随机不触发if语句，因此图像永远不会调整大小。我设置了一个超时，希望这个超时能让浏览器有时间读取图像。但运气不好，为什么它不会触发？

附带说明：这是一个移动网络应用程序，我可以使用HTML5吗？

     var maxWidth = 200;
     var imgWidth = $('#locImg').width();
     console.log(imgWidth);
     setTimeout(function () {
         if( imgWidth > maxWidth) {
             newWidth = maxWidth;
             var newHeight = $('#locImg').height() / ( $('#locImg').width() / maxWidth);
             $('#locImg').height(newHeight).width(newWidth);
             console.log($('#locImg').width());
             $('#loc').css('visibility','visible');
         }
         else {
             $('#loc').css('visibility','visible');
         }
      },750);

您可以使用这样的方法来确保图像完全加载：

 var maxWidth = 200;
 var imgWidth = $('#locImg').width();
 var image = new Image();
 image.src = $('#locImg').attr("src");
 image.onload = (function () {
     if( imgWidth > maxWidth) {
         newWidth = maxWidth;
         var newHeight = $('#locImg').height() / ( $('#locImg').width() / maxWidth);
         $('#locImg').height(newHeight).width(newWidth);
         console.log($('#locImg').width());
         $('#loc').css('visibility','visible');
     }
     else {
         $('#loc').css('visibility','visible');
     }
  });

这样，它只在图像完全加载后才开始调整大小。

相关文章：