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