0

I've created this simple HTML website where while scrolling background images are changed with jQuery. There are 500 images so while scrolling its like a silent film, it's really cool. My problem is images take time to load, so while scrolling most of them are just white, waiting to be loaded. Can i somehow load them all before opening the website and allowing the user to scroll?

Bill Hicks
  • 105
  • 1
  • 4
  • 15
  • You could use the `onload()` event on images to not allow scrolling before all are done or put all as base64 in a css file. Yet with preloading the initial loading will take longer. – Lain Jun 29 '18 at 12:42
  • Before opening the website will be difficult, since we can't predict the future yet. ;) But once the website gets opened, you can preload all the images and give them long cache times. Have a look at `` in the docs. – Shilly Jun 29 '18 at 12:43
  • You could assign an `eventListener` (`$(document).ready(function() {})` in jQuery) to your document that checks if the DOM is loaded. If it has finished loading, allow to scroll. – CodeF0x Jun 29 '18 at 12:44

0 Answers0