If you want to create a fade out effect for images once they are all loaded, you can add a load event to each image and trigger the fadeOut animation when all images have finished loading.
To keep track of the loading status of multiple images, you can utilize an array of jQuery.Deferred() objects. Once all Deferreds are resolved, you can then initiate the fade animation.
Below is a function that demonstrates how this can be achieved:
function fadeWhenReady(projImages, images) {
projImages.innerHTML = "";
var loads = []; //create array for deferred calls
//create images and set up load events
for (var i = 0; i < activeProj.images.length; i++ ) {
var deferred = $.Deferred();
var img = $("<img src=\"" + activeProj.images[i].url + "\" />");
img.on("load", function() { deferred.resolve() }); //resolve deferred after image load
loads.push(deferred.promise()); //add deferred event to the array
img.appendTo(projImages); //append image to page
}
//apply fade effect when all deferreds are resolved
$.when.apply($, loads).done(function() {
$("#project-display").fadeTo(600, 1.0);
});
}
In your function showProject, remove the call to
$("#project-display").fadeTo(600, 1.0);
and replace it with a call to the
fadeWhenReady function as shown below:
projImages.innerHTML = "";
for (var i = 0; i < activeProj.images.length; i++ ) {
projImages.innerHTML += "<img src=\"" + activeProj.images[i].url + "\" />";
}
P.S. It appears you are using a combination of jQuery and vanilla JavaScript. Consider replacing your XMLHttpRequest calls with jQuery.ajax() for consistency.