Jquery在图像上获取零宽度

Question

我有一个jquery width()的问题；

Html标记：

<img height="300px" src="http://localhost/portfolio/wp-content/uploads/Alone.jpg" alt="Alone" title="Alone" />

Jquery：

var slide_width = 0;
    $("#barely_slide article img").each(function(){
        console.dir($(this).width());
    });
    console.dir(slide_width);

查看$(this)，我看到clientWidth返回正确的值，也返回offsetWidth，但它们没有等效的jquery函数。

Answer 1

用下面的代码包装你的函数调用：

(function($) {

  $(document).ready(function() {
    //Here you can manupilate the dom. Images are not loaded yet.
  });

  $(window).load(function() {
    //Here you can check for image widths.
  });

})(jQuery);

您可以使用以下命令检查客户端宽度：

$(window).width();

对于您的文档宽度，使用：

$(document).width();

Answer 2

获取图片加载后的宽度：

$("#barely_slide article").on('load', 'img', function(){
    console.dir($(this).width());
});

Answer 3

我认为你应该确保你的图片是由浏览器加载的，你可以尝试执行以下操作：

 $(document).ready(function(){ 
     var slide_width = 0;
     $("#barely_slide article").find("img").each(function(){
          console.dir($(this).width());
     });
     console.dir(slide_width);
 });