How to change CSS after lazy loading image (jQuery)?

Question

I have the following problem: after the user clicks on the thumbnail, the larger image is loaded with lazy loading and opens. Code for downloading a larger image:

<img width="663" height="845" class="big" data-original="real/path/to/image" src="path/to/empty/small/picture"> 

When a user clicks on a thumbnail, the following code is executed:

 $("img.thumb").click(function() { var $cont = $(this).siblings('.item-content').children('.big'); $cont.attr('src', $cont.attr("data-original")); setTimeout(function(){ $cont.css({'height': 'auto', 'width': '100%'}); }, 600); }); 

Each large image should have CSS "height" for "auto" and "width" be "100%" because I am making the layout flexible / fluid. The above code gets the value of the "src" attribute from the "data-original" attribute. But "height: auto" and "width:100%" are set in this example to 600ms after the attributes replace them. This does not work, because I use the Isotope jQuery plugin ( http://isotope.metafizzy.co/ ) for this, and this plugin needs real width and height in order to correctly position the grid. When "height: auto" and "width:100%" are set during image loading, the plugin is lost and elements are not correctly positioned.

So how to do this to set these 2 CSS properties after loading the image?

Answer 1

Well, I found a solution: there is a small jQuery plugin called imagesLoaded . It calls a callback after all the selected child images are loaded. The problem was that you cannot do .load() on cached images.

Answer 2

You can use .load()

 $('img.big').load(function() { if($(this).attr('src') == $(this).attr('data-original')) { $(this).css({'height': 'auto', 'width': '100%'}); } }); 

http://jsfiddle.net/TYufy/4/ - example using .load()