изменение размера изображения javascript в jquery

Question

Я натолкнулся на скрипт для динамического изменения размеров изображений для подгонки под определенную ширину здесь .Я изменил его для своего собственного веб-приложения, и оно работает большую часть времени, но по какой-то причине функция иногда не будет случайным образом вызывать оператор 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');
     }
  });

Таким образом, изменение размера начинается только после полной загрузки изображения.