在控制台中工作，但不在.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(...)