Как запустить код сразу при загрузке изображения?

Question

Я хочу получить ширину изображения при загрузке страницы. Поскольку ширины изображения используется для оценки некоторых условий, логика, как это:

var width = $('img').width(); 
var height = $('img').height(); 
if(width > height){ 
    //do fn1 
}else{ 
    //do fn2 
} 

Here is a link имитировать мою проблему. Я знал, что если функция использования setTimeout задержка до , то получить ширину изображения можно, но это неточно.

Answer 1

Это пример, приведенный в документации JQuery:

... страницы с простым изображением:

<img src="book.png" alt="Book" id="book"> 

Обработчик события может быть связан с изображением:

$("#book").load(function() { 
    // Handler for .load() called. 
}); 

Как только изображение загружено, вызывается обработчик.

http://api.jquery.com/load-event/

Вот еще на эту тему, которая поможет вам:

How to get image size (height & width) using JavaScript?

Answer 2

object.onload=function(){ 
var width = $('img').width(); 
height = $('img').height(); 
}; 

Вы можете попробовать эту функцию.

Answer 3

Вы должны проверить ширину и высоту изображения после загрузки изображения. С JQuery вы можете проверить загрузку страницы, как это:

$('img').load(function() { 
      var width = $('img').width(); 
      var height = $('img').height(); 

      if(width > height){ 
      console.log(1); 
      }else{ 
      console.log(2); 
      } 
    }); 

JS BinExample Here

Answer 4

Или, если вы удивительные, вы можете создать элемент изображения, добавить источник и сделать что-то, когда оно загружено. Нет необходимости в jQuery.

var image = new Image(); 
image.onload = function() { 
    alert('image loaded'); 
}; 
image.src = 'image/image.jpg';