Load Random Image From Directory on Page Load Without a Listed Array of File Names

Question

I\'ve done some looking around on the site and every time I pull up a solution to this problem, one of the requirements is to have a naming convention and a list of every image

Answer 1

First you need to get your file list from server side. then you can use a code like following:

  var imageList = //your image list as an array of urls;
  var imageNumber = Math.random() * imageList.length; //gives you a random number in the range of imageList's size
  var imageToLoad = new Image();
  imageToLoad.addEventListener("load", function(){
      console.log( "image is loading" );
      $('#my-container').append(this); //in this case this will return image dom
  });
  imageToLoad.src = imageList[imageNumber];

this will add image to a container with id 'my-container' its just an example you can do anything you want using 'this'