Detecting initial display - three.js

Question

I'm loading eight 8192 x 4096 textures on init. Naturally there's a delay prior to display as the textures load. Is there a way for me to detect when first display has taken place? With the example below, I'd like onDocumentMouseDown to fire only when I can see the textures - not while the screen is still blank as loading takes place.
function init() {
camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 1000 );
scene = new THREE.Scene();
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
var sphereGeometry = new THREE.SphereBufferGeometry(500, 100, 100);
sphereGeometry.scale(-1, 1, 1);
var renderList = ["DF_DC_DS", "DF_DC_LS", "DF_LC_DS", "DF_LC_LS", "LF_DC_DS", "LF_DC_LS", "LF_LC_DS", "LF_LC_LS"];
for (var i = 0; i < renderList.length; i++) {
var texture = new THREE.TextureLoader().load( "img/high-quality/" + renderList[i] + ".jpg",
function ( texture ) {
textureLoadedCount++;
if (textureLoadedCount == 8) {
allLoaded = true;
}
}
);
texture.anisotropy = renderer.capabilities.getMaxAnisotropy();
var material = new THREE.MeshBasicMaterial( { map: texture } );
var mesh = new THREE.Mesh( sphereGeometry, material );
scene.add( mesh );
}
document.addEventListener( "mousedown", onDocumentMouseDown, false );
}