i using json paths of images , dynamically creating url want load.
the index.html
<div id="divdata"></div> the data.json
{ "images":[ {"path":"slide1.jpg"}, {"path":"slide2.jpg"} ] } the main.js
$(function(){ var siteurl='data.json'; //get json file via ajax $.getjson(siteurl, function(json, textstatus) { var rootobj=json.images for(var i=0;i<rootobj.length;i++){ var fullpath="http://placehold.it/350x150" addnewimage(fullpath); } }); }); function addnewimage(path){ var img=new image(); img.onload = function(){ $("#divdata").append(img); alert("done load");**// alert show after every image** load }; img.src=path; } }); i alert after every image load want once when images have loaded. how can that?
note: looking event driven way. know can done counter keeping track of loaded images,etc. that's not looking for.
you can use $(window).load(function() { ... }); ensure images , other contents loaded fully.
if want specific solution images here is:
$(function() { // keep track of how many images have loaded var loaded = 0; // let's retrieve how many images there var numimages = 10; // let's bind function loading of each image $("img").load(function() { // 1 more image has loaded ++loaded; // if images have loaded if (loaded === numimages) { // executed once after images loaded. function() { ... } } }); }); 