jquery - Crop image to correct size by tweaking the image url -

i trying crop lazyload image correct size. have simple jquery plugin given below can resize , crop image correct size tweaking image url. jquery code automatically crop image correct size. when use lazyload plugin load image script not able crop image.

js:

var w = 200; var h = 150; $('#crop').find('img').each(function(n, image){   var image = $(image);   image.attr({src : image.attr('src').replace(/s\b\d{2,4}/,'s' + w + '-h' + h +'-c')});   image.attr('width',w);   image.attr('height',h);  }); 

html: fiddle: http://jsfiddle.net/kh5btqyu/3/ (with out lazyload)

<div id="crop"> <img src=""/> </div> 

lazyload html: fiddle: http://jsfiddle.net/v2fud3a4/4/ (unable crop)

<div id="crop"> <img data-src=""/> </div> 

actually lazyload plugin works when change image src <img src=""/> data-src <img data-src=""/> , when scroll down page, when image window viewport replace image link <img data-src=""/> <img data-src="" src=""/> images visible.

so image crop plugin not able find image scr link. because lazyload plugin have <img data-src="" src=""/> link. reason image crop plugin run after page load, lazyload make loads image on window viewport, when scroll down page , image window view.

my question there way run image crop plugin, when lazyload plugin replace image link <img data-src=""/> <img data-src="" src=""/>, means crop plugin run when lazyload plugin has loaded image.

thanks.

the trick call re-sizing function after lazy loading of image.

$.extend($.lazyloadxt, {     onload:myfunc });   function myfunc(){     var w = 200; var h = 150; $('#crop').find('img').each(function(n, image){   var image = $(image);   image.attr({src : image.attr('src').replace(/s\b\d{2,4}/,'s' + w + '-h' + h +'-c')});   image.attr('width',w);   image.attr('height',h);  }); } 

here fiddle