Apply overlays after all images have loaded

[Fox-Islam]

The current behavior starts applying overlays after a short timeout, irrespective of whether all the images have loaded or not. For slow connections this means that all the overlays may end up being the same one or two images repeated.

This commit ensures the overlays only start applying once we've stopped fetching image URLs.

[MagicJinn]

Hey there! The CheckImageExistance function does not check whether a thumbnail exists. Rather, it is part of the checkAmountInDirectory function that automatically gets the list of images in the images folder for easy scalability. Therefor, this code runs as soon as it has indexed all images in the images folder, not after the thumbnails load. We have attempted to implement thumbnails loading as the page loads here, but this was causing issues in Firefox and was thus scrapped for the time being.

[MagicJinn]

Update: After reading your original message again, it appears I've misunderstood what you meant. While this does indeed solve the issue where the same 1/2 images get applied to all thumbnails, the loop was meant to make sure that any new images that got loaded in when scrolling youtube would also get a MrBeast. Currently in your version, when you scroll down on the page, it doesn't load any new MrBeasts. This can be fixed however, by putting the setInterval function inside of your .catch block. I will merge this fix soon!