I run a website packed with HTML videos featuring personally designed video control buttons. The dilemma arises when hovering over the play/pause button - CSS works its magic to swap out the button image for one in a different color. However, upon initial page load or reload, that first hover causes the button to disappear momentarily while it fetches the new image. To counter this, I decided to preload images labeled numerically starting from one. Each thumbnail follows a consistent naming convention: a number followed by 'mo.png'. It goes like 1mo.png, 2mo.png, and so on. My solution involved automating the preloading process using this snippet:
for(var x = 1; x < 5; x++){
no = x.toString();
cs = 'img' + no + ' = new Image(); img' + no + ".src = 'media/" + no + "mo.png';";
eval(cs);
}
This method does the job for images following the pattern of 1mo.png to 4mo.png (alterable based on how many 'mo'-suffixed pictures to preload).
My desire is for JavaScript to scour through my directory's images folder and replicate the same approach used for 'mo' images to preload any images present with assorted names. Essentially, I seek insight on extracting file names from a specific folder within my site's directory and storing them as an array or variables.