Question

我找到了一个脚本，用于动态调整图像大小以适合特定宽度here。我为自己的网络应用程序修改了它，并且它在很长一段时间内工作，但由于某种原因，当图像确实具有更大的宽度时，函数有时会随机地不触发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);

Answer 1

你可以使用这样的东西来确保图像满载：

 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');
     }
  });

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

在jquery中调整javascript图像的大小

1 个答案: