javascript - Jquery在图像上获得零宽度

Question

我在使用 jquery width(); 时遇到问题。

html标记：

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

查询：

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);
 });