jquery - Adding images to dom, then wait for them to load -

this simple question..

i playlist, , want load each image dom * there videos to.

so after media has finished loading, want able call function.

but in case below part console.log("loaded + images") gets called because dom loaded, , after images gets added. how tell me when images loaded ?

     <script type="text/javascript">             _.each(playlist, function(el) {                 $(".hidden").append("<img src='"+ el.path +"''>")             });     </script>     <script type="text/javascript">         $(window).ready(function() {             console.log("loaded + images")         });     </script> 

you can add load method dynamically created images, when image has finished loading, can catch this.

e.g.

var img = $('<img />', { attr: { src: el.path }}).load(function(){     // code here })); $(".hidden").append(img); 

with this, can have global count checks against number of images have. when global count of images loaded matches total number of images, can call console.log("loaded + images"); code.

i have put little jsfiddle here can see in action.