Работает в консоли, но не в .js файле

Question

Я пытаюсь добавить атрибуты ширины и высоты к моим изображениям; jQuery, который я использовал, работает в консоли, но не в связанном файле .js. Я пробовал это, и он не работает.

$(document).ready(function() { 
    $('.media-box-image').each(function() { 

     var $width = $('.media-box-image').width(); 
     var $height = $('.media-box-image').height(); 
     var $this = $(this).find('img'); 

     $this.attr('width', $width); 
     $this.attr('height', $height); 
    }); 
}); 

Я также попытался это, но он также не работал

$(document).ready(function() { 
    $('.media-box-image').each().on('load', function() { 

     var $width = $('.media-box-image').width(); 
     var $height = $('.media-box-image').height(); 
     var $this = $(this).find('img'); 

     $this.attr('width', $width); 
     $this.attr('height', $height); 
    }); 
}); 

Я проверил консоль, но кажется, что все будет в порядке. Что еще я могу сделать?

Answer 1

я ответил мой собственный вопрос: я сделал следующее, и она работает отлично

$(window).load(function() { 
    // Run code 
    $('.media-box-image').each(function() { 
     var $width = $('.media-box-image').width(); 
     var $height = $('.media-box-image').height(); 
     var $this = $(this).find('img'); 

     $this.attr('width', $width); 
     $this.attr('height', $height); 
    }); 
}); 

Answer 2

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

Поскольку данных изображения нет, изображения не имеют ни ширины, ни высоты.

Использование $(window).on('load'...) вместо $(document).ready(...)