same onclick js function for multiple images

Question

I have a gallery of images. I want to show a loading gif when an image is clicked. I am passing the same onclick function to all the images with their id as below:

<div id="smallimage1" onclick="imageClicked(this.id)">                                                                                  
    <img class="model-img" src="img/model/image1.jpeg"/>                                                                                
</div>

<div id="smallimage2" onclick="imageClicked(this.id)">                                                                                  
    <img class="model-img" src="img/model/image2.jpeg"/>                                                                        
</div>

<div id="loading" style="margin-top: -65%; display: none; z-index= 9999; position: relative;">                                                                      
    <img src="img/imagepreloader.gif" alt="loading...">                                                                                 
</div>

This is my js :

function imageClicked(id) {
    //  alert(id);
    document.getElementById("loading").style.display = ""; // to display
    //alert(loading);
    return true;
}

var FirstLoading = true;

function Restoresmallimage() {
    if (FirstLoading) {
        FirstLoading = false;
        return;
    }
}

// To disable restoring submit button, disable or delete next line.
document.onfocus = Restoresmallimage;

For the first image its working fine. But issue is when I am clicking on second image, gif is running on first image and not on the second one. How to resolve this issue? I had defined loading id in each div image.

Answer 1

Try this if it will work,

<div id="smallimage1" onclick="imageClicked(this.id)">                                                                                  
    <img class="model-img" src="img/model/image1.jpeg"/>                                                                                
</div>

<div id="smallimage2" onclick="imageClicked(this.id)">                                                                                  
    <img class="model-img" src="img/model/image2.jpeg"/>                                                                        
</div>

<div id="loading1" style="margin-top: -65%; display: none; z-index:9999; position: relative;">                                                                      
    <img src="img/imagepreloader.gif" alt="loading...">                                                                                 
</div>

<div id="loading2" style="margin-top: -65%; display: none; z-index: 9999; position: relative;">                                                                      
    <img src="img/imagepreloader.gif" alt="loading...">                                                                                 
</div>

And your script will be like this;

function imageClicked(id) {
    //  alert(id);
    var loadingId = $(id).replace('smallimage','loading');
    document.getElementById(loadingId).style.display = "block"; // to display
    //alert(loading);
    return true;
}

Answer 2

I think the problem is you never move imagepreloader.gif . Here is my solution to have only one imagepreloader.gif for all images:

HTML:

<div id="smallimage1" onclick="imageClicked(this.id)">
    <img class="model-img" src="img/model/image1.jpeg"/>
</div>

<div id="smallimage2" onclick="imageClicked(this.id)">
    <img class="model-img" src="img/model/image2.jpeg"/>
</div>

CSS:

div {
    display: inline-block;
    position: relative;
}

#loading {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

JavaScript:

function constructImagePreloader() {
    'use strict';

    var imagePreloader = document.createElement('img');

    imagePreloader.setAttribute('src', 'images/imagepreloader.gif');
    imagePreloader.setAttribute('alt', 'loading...');
    imagePreloader.setAttribute('id', 'loading');

    return imagePreloader;
}

function imageClicked(id) {
    document.getElementById(id).appendChild(constructImagePreloader());

    return true;
}

Tell me if it suits your needs. We could go further with code optimization but I wanted to stay close from your code for now. For instance: we could remove the image preloader from the clicked image if another image is clicked.