Question

I attach capty to images, I do

$(document).ready(function(){
$('.shop_banner img').capty({height:150});
});

In chrome when I debug capty code alert($this.height()) is zero so wrapper hide image. I know some browser wants image to be fully loaded but if I use ready doesn’t mean that it executes after page is fully loaded? What can I do?

Answer 1

No, load and ready aren’t the same thing.

You can do

$(window).load(function(){
    $('.shop_banner img').capty({height:150});
});

ready calls your function as soon as the DOM is ready, which doesn’t mean images are loaded.

From the documentation :

While JavaScript provides the load event for executing code when a
page is rendered, this event does not get triggered until all assets
such as images have been completely received. In most cases, the
script can be run as soon as the DOM hierarchy has been fully
constructed. The handler passed to .ready() is guaranteed to be
executed after the DOM is ready, so this is usually the best place to
attach all other event handlers and run other jQuery code. When using
scripts that rely on the value of CSS style properties, it’s important
to reference external stylesheets or embed style elements before
referencing the scripts.

In cases where code relies on loaded assets (for example, if the
dimensions of an image are required), the code should be placed in a
handler for the load event instead.