Show the item before uploading the photos

Question

I have a form with multiple photos. They take a long time to load all images. I would like a replacement photo to be shown before uploading the photos. And then a photo from the form, if my user's browser is already loading everything.

<!-- Basic img -->
<img alt="Loader img" src="/home/loader/img-loader.png">

<a href="choice/1/">
  <h1>Choice field 1</h1>
  <img alt="Loader img" src="/image/1.png">
</a>
<a href="choice/2/">
  <h1>Choice field 2</h1>
  <img alt="Loader img" src="/image/2.png">
</a>
<a href="choice/3/">
  <h1>Choice field 3</h1>
  <img alt="Loader img" src="/image/3.png">
</a>
<a href="choice/4/">
  <h1>Choice field 4</h1>
  <img alt="Loader img" src="/image/4.png">
</a>

So until the photo is uploaded <img alt="Loader img" src="/image/1.png"> <img alt="Loader img" src="/image/2.png"> <img alt="Loader img" src="/image/3.png"> <img alt="Loader img" src="/image/4.png"> user see and then after loading all images by the browser, the user sees everything.

How to recive this effect using JS / jQuery or CSS / Html

Does [This](https://stackoverflow.com/questions/1588854/fallback-image-and-timeout-external-content-javascript) your question? — Dhaifallah, Mar 24 '22 at 15:43
There's a lot of information to be found on placeholder image strategies. What have you tried? — isherwood, Mar 24 '22 at 15:45

score 1 · Answer 1 · answered Mar 24 '22 at 15:44

You can give the images a background-image via CSS, but only if they have a data-loading-attribute. When the onload event of the image triggers, remove this attribute. Adjust dimensions and image paths as needed.

img[data-loading] { 
  height: 40px; 
  width: 40px; 
  background-image: url(./path/to-background-image.png); 
}

and in the HTML:

<img alt="Loader img" src="/image/4.png" data-loading onload="this.removeAttribute('data-loading')">

Show the item before uploading the photos

1 Answers1