'Show the item before uploading the photos

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

javascripthtmljquerycss


Solution 1:[1]

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')">

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 connexo

Related Questions