synchronous - sending requests for images synchronously with jquery -

i having page feed youtube , display on page. there 3 rows each of 4 images each corresponding youtube videos. these image links youtube feed itself.

what want achieve while rendering these images, want fetch image youtube 1 row @ time. if images load not completed, want wait until next row images fetched.

can guide me how can de done? read stuff jquery deferred objects , callbacks, since not strong on jquery/js not able crack one. js executes asynchronously , therefore image requests go 1 after , not able make js wait until images each row rendered before next row sent.

i have loop , diaply images follows:

$j("#thumbnail_image_"+i).css({'background-image':'url('+cdnpath+')'}); myimage[i].src = cdnpath; 

basically, if use proper img element store image, can subscribe onload , onerror events. can count how many of images loaded

var loaded = 0; (var = 0; < imgtags.length; i++) {    imgtags[i].src = "/path/to/img";     function handle() {        loaded++;        if (loaded == imgtags.length) {            loaded = 0;            // call next row or finish        };    };    img.onload = handle;    img.onerror = function () {         handle();         // possible error handling here    }; }; 

where imgtags array img elements in current row. don't forget set count 0 on each row. therefore don't need jquery it.

if don't use img element , set background div, don't think it's possible achieve.

demo