0
const maxFiles = 50;
const randomEl = document.getElementById("random"); 

function randombg() {
    var random = Math.floor(Math.random() * maxFiles) + 1;
    randomEl.style.backgroundImage = `url('images/ (${random}).jpeg')`
}
randombg();

I have the above code that randomly generates background image to body which id is random. Because the images that I load are at very high resolution the loading is not smooth. How can I add lazy load so the whole image will load at once?

dhilt
  • 18,707
  • 8
  • 70
  • 85
Atanas Bobev
  • 71
  • 8
  • Two things. First, there are already existing questions on SO about lazy loading images. Did you search for this term and see what they offered? And secondly, there is no jQuery in this question. – Taplar Oct 29 '18 at 16:52
  • Did you try googling your title? Lot's of results. What have you tried so far? – Dominic Oct 29 '18 at 16:53
  • 1
    probably you don't really want lazy loading more you don't want to show the image until it's fully loaded? have a look at https://stackoverflow.com/questions/5057990/how-can-i-check-if-a-background-image-is-loaded – digital-pollution Oct 29 '18 at 16:53
  • Possible duplicate of [Lazy loading images how](https://stackoverflow.com/questions/4033596/lazy-loading-images-how) – Taplar Oct 29 '18 at 16:53
  • 1
    Possible duplicate of [How can I check if a background image is loaded?](https://stackoverflow.com/questions/5057990/how-can-i-check-if-a-background-image-is-loaded) – freedomn-m Oct 29 '18 at 16:55

0 Answers0