Question

It seems like in jQuery when an element is not visible width() returns 0.
when I remove the accordion the height is reported correctly. I tried wrapping the images in a div and setting the div’s display to block , but this didn’t work either.
is there any alternative to find image original size when accordion applied?

<div id="accordion">
    <h3>Click me</h3>
    <div>
         <div class="bg">
               <img src="your_img_url">
         </div>
    </div>      
    <h3>Click me</h3>
    <div>
         <div class="bg">
               <img src="your_img_url"/>
         </div>
    </div>
</div>

$(document).ready(function() {   
    $('#accordion').accordion({
        autoHeight: false,
        collapsible: true,
    });
    $("img").load(function() {
        alert($(this).height());
        alert($(this).width());
    });
});

Answer 1

Setting a specific width and height on the images will return that width and height. This can be done in CSS or using the width and height attributes on the <img> element.

Changing your images to <img src="your_img_url" style="height: 20px; width: 20px;"> should work.

If you need original width, you could do something like this:

var img = $('img').clone().appendTo('body').hide();
img.load(function () {
    alert($(this).width());
    alert($(this).height());
});

This answer has more detailed information on how to get the original size.