Как мне получить размеры изображения, чей src динамически заполняется jQuery?

Question

Предположим, у меня есть пустой тег-заполнитель <img>, который я хочу заполнить динамически. Я звоню $("img").attr("src", "somephoto.jpg"), чтобы указать элемент на правильное изображение. Тем не менее, затем я хочу сделать что-то на основе ширины этого изображения, но оба значения $("img").width() и $("img").attr("width") возвращают 0.

Как я могу получить ширину изображения - или еще лучше, есть ли способ динамически установить SRC изображения, который лучше практиковать и решит мою проблему?

Answer 1

Вам нужно подождать, пока изображение загрузится первым.

$("img")
  .attr("src", "somephoto.jpg")
  .on("load", function () {
    alert(this.height()+" "+this.width())
  })

Мой jQuery может быть немного ржавым.Вот оно в простом старом JS

var i = new Image()
i.src = "somephoto.jpg"
i.onload = function () {
  alert(this.height + " " + this.width)
}

Answer 2

Я бы лично добавил все новое изображение вместо использования атрибута src пустого тега img.

Как они возвращают ноль? Помните, что эти два метода будут возвращать строковое представление ширины, то есть «10px», а не целое число 10.