Как я могу получить ширину изображения после установки атрибута src без перезагрузки страницы

Question

У меня есть функция, которая, если я передаю ему исходный образ, должен изменить атрибут src элемента $ ("# image"), эта функция вызывается, когда я нажимаю кнопку, которая не находится внутри формы (это означает, что страница не перезагружается)

function modify_image(image_src){ 
    $("#image").attr("src", image_src); 
} 

, как я могу получить ширину этого изображения после его ЦСИ изменился?

Answer 1

Загрузка изображения является асинхронным, так что вы должны ждать, пока он не будет загружен, чтобы получить ширину:

function modify_image(image_src){ 
    $("#image").on('load', function() { 
     var width = this.width; 
    }) 
    .attr("src", image_src) 
    .each(function() { 
     if (this.complete) $(this).trigger('load'); 
    }); 
} 

Всегда изменить источник после был прикреплен обработчик onload события, и для кэширования изображения вы должны проверить имущество this.complete и вызвать событие onload самостоятельно.

Answer 2

Событие нагрузки будет срабатывать, когда изображение обновлено:

$("#image").attr("src", image_src) 
    .load(function() { 
     $(this).width(); // the new image width 
    }) 

Answer 3

Вы можете использовать функцию загрузки

function modify_image(image_src){ 
    var img = new Image(); 
    img.src = image_src; 
    img.onload = function() { 
     var width = img.width; 
    }; 
    $("#image").attr("src", img.src); 
} 

В функции загрузки вы можете извлечь его свойства, такие как высота

Answer 4

Вот мой вкус:

function modify_image(image_src){ 
     $("#image").attr("src", image_src).load(function() { 
      console.log($(this).width()); 
     }); 
    }