javascript - Fadein callback not working properly with ajax-loaded json data -

javascript - Fadein callback not working properly with ajax-loaded json data -

this design portfolio page. on load, json info retrieved via ajax, , 1 of keys used generate list of '.project-links' (no project displayed on load, , project images loaded when project selected (see showproj function)). question regards fadein/fadeout: images still painting onto screen after fade in completes, despite project content beingness defined/loaded within fadeout callback; can please enlighten me how can tweak fadein won't run until projimages loaded?

thank you, svs.

function ajaxreq() { var request = new xmlhttprequest(); homecoming request; } function makelinks(projects) { // result = getjsondata > request.responsetext var projectlist = document.getelementbyid("project-list"); (var project in projects) { if (projects[project].status !== "dnu") { var projectid = projects[project].id; var listitem = "<li><a class=\"project-link\" id=\""+projects[project].project+"\" href=\"#\">" + projects[project].project + "</a></li>"; projectlist.innerhtml += listitem; } // if !dnu } // add together event listeners var projlink = document.getelementsbyclassname("project-link"); (var = 0; < projlink.length; i++) { var projid = projlink[i].id; //projlink[i].dataset.projix = [i]; projlink[i].addeventlistener("click", showproject, false); } var shownext = document.getelementbyid("show-next"); var showprev = document.getelementbyid("show-previous"); shownext.addeventlistener("click", showproject, false); showprev.addeventlistener("click", showproject, false); // arrow keys [not invoking showproject function] $(document).keydown(function(e) { if(e.which==37) { // left arrow $(showprev).click(showproject); console.log("previous"); } else if(e.which==39) { // right arrow $(shownext).click(showproject); console.log("next"); } }) function showproject(projid) { var intro = document.getelementbyid("intro"); if (intro) { intro.parentnode.removechild(intro); } projid.preventdefault(); var projlinks = document.getelementsbyclassname("project-link"); // array var selix = $(".selected").index(); // ###### click previous/next ###### if (this.id === "show-previous" || this.id === "show-next") { // 1a. if nil .selected if (selix < 0) { if (this.id === "show-previous") { var selix = projlinks.length-1; } else if (this.id === "show-next") { var selix = 0; } } // 1b. if .selected: else if (selix > -1) { if (this.id === "show-previous") { if (selix === 0) { // if @ first slide selix = projlinks.length-1; } else { selix --; } } else if (this.id === "show-next") { if (selix === projlinks.length-1) { // if @ lastly slide selix = 0; } else { selix ++; } } } var selprojli = projlinks[selix]; // => li } // click previous/next // ###### click .project-link ###### else if (this.id !== "show-previous" && this.id !== "show-next") { var selix = $(this).closest("li").index(); } // fade out, callback: load new project $("#project-display").fadeto(450, 0.0, function() { // ###### ###### $(".selected").removeclass("selected"); var projid = projlink[selix].id; var selprojli = projlink[selix].parentelement; selprojli.classname = "selected"; var projectdisplay = document.getelementbyid("project-display"); // set vars project display elements: var projname = document.getelementbyid("project-name"); // h3 var projtools = document.getelementbyid("project-tools"); var projnotes = document.getelementbyid("project-notes"); var projimages = document.getelementbyid("project-images"); // disappear metadata elements 'cause they'll empty projtools.style.display = "none"; projnotes.style.display = "none"; testimonial.style.display = "none"; (var project in projects) { // 'projects array' -> project if (projects[project].project === projid) { var activeproj = projects[project]; projname.innerhtml = activeproj.project; // maintain centered display of project-metadata: check value, else element remains hidden if(activeproj["tools used"]) { projtools.style.display = "inline-block"; projtools.innerhtml = activeproj["tools used"]; } if(activeproj.notes) { projnotes.style.display = "inline-block"; projnotes.innerhtml = activeproj.notes; } if(activeproj.testimonial) { testimonial.style.display = "inline-block"; testimonial.innerhtml = activeproj.testimonial; } // how ensure these loaded ***before #project-display fades in*** projimages.innerhtml = ""; (var = 0; < activeproj.images.length; i++ ) { projimages.innerhtml += "<img src=\"" + activeproj.images[i].url + "\" />"; } } // if project id ... } // (var obj in data) }) // fade out $("#project-display").fadeto(600, 1.0); } // showproject } // makelinks function getjsondata() { var request = ajaxreq(); request.open("get", "/json/projects.json", true); request.setrequestheader("content-type", "application/json"); request.send(null); request.onreadystatechange = function() { if (request.readystate === 4) { if (request.status === 200) { //makelinks(request.responsetext); var projects = json.parse(request.responsetext); var projects = projects["projects"]; makelinks(projects); // makelinks = callback homecoming projects; } } } // onreadystatechange } // getjsondata getjsondata(makelinks);

you can add together load event images , run fadeout when images loaded.

since going need multiple images finish loading, chose maintain track of loads finish using array of jquery.deferred() objects. 1 time deferreds resolved can run fade animation.

here's function should work:

function fadewhenready(projimages, images) { projimages.innerhtml = ""; var loads = []; //create holding bin deferred calls //create images , attach load events (var = 0; < activeproj.images.length; i++ ) { var deferred = $.deferred(); var img = $("<img src=\"" + activeproj.images[i].url + "\" />"); img.on("load", function() { deferred.resolve() }); //after image load, resolve deferred loads.push(deferred.promise()); //add deferred event array img.appendto(projimages); //append image page } //when deferreds resolved, apply fade $.when.apply($, loads).done(function() { $("#project-display").fadeto(600, 1.0); }); }

in function showproject remove phone call $("#project-display").fadeto(600, 1.0); , replace lines below phone call fadewhenready function.

projimages.innerhtml = ""; (var = 0; < activeproj.images.length; i++ ) { projimages.innerhtml += "<img src=\"" + activeproj.images[i].url + "\" />"; }

p.s. using unusual mix of jquery , vanilla javascript. calls document.getelementbyid() don't mind me much, i'd recommend replacing xmlhttprequests jquery.ajax().

javascript ajax json fadein fadeout