JS Событие Как каждое изображение Нагрузка

Question

Прямо сейчас у меня есть некоторый код, который выполняется после того, как страница загружается так:

$(window).load(function() { 

    $('.featuredimage').each(function(){ 
     var img_width = $(this).width(); 
     var img_height = $(this).height(); 

     if (img_height >= img_width){ 
      $(this).addClass("artistthirdtall"); 

     }; 

     if (img_height < img_width){ 
      $(this).addClass("artistthirdwide");  
     }; 

    }); 


}); 

Однако, есть некоторые большие изображения на странице и могут быть «мерцание» так как изображения обрабатываются Javascript.

В идеале я хотел бы запускать эту функцию на каждом изображении при его загрузке (а не ждать, пока все они будут загружены).

Я посмотрел на эту страницу события загрузки jQuery: https://api.jquery.com/load-event/, и похоже, есть некоторые серьезные проблемы с ее использованием для проверки загрузки изображений? Но приведенный пример - это именно то, что я пытаюсь сделать.

Так безопасно использовать приведенный пример кода или нет?

Благодаря

PS - Я самоучкой разработчик и не знаю, что много так пожалуйста, простите меня, если я сказал что-то глупо.

Answer 1

Я бы добавил класс к вашим изображениям, чтобы скрыть их, пока они не будут готовы. Тогда исчезают их в Поцарапанный $ .ready для нагрузки, основанной на следующем:. Official way to ask jQuery wait for all images to load before executing something

<img src="foo" class="featuredimage ui-hidden-accessible" 

    $(window).load(function() { 
     $('.featuredimage').each(function() { 
     var img_width = $(this).width(); 
     var img_height = $(this).height(); 

     if (img_height >= img_width){ 
      $(this).addClass("artistthirdtall").fadeIn(); /* added fadeIn() */ 
     }; 

     if (img_height < img_width){ 
      $(this).addClass("artistthirdwide").fadeIn(); /* added fadeIn() */  
     }; 
    }); 
});