javascript - 多个图像的相同 onclick js 函数

Question

我有一个图片库。我想在单击图像时显示加载 gif。我将相同的 onclick 函数传递给所有图像，其 id 如下:

<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>

这是我的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;

对于第一张图片，它工作正常。但问题是，当我单击第二个图像时，gif 正在第一个图像上运行，而不是在第二个图像上运行。如何解决这个问题？我在每个 div 图像中定义了加载 id。

Answer 1

我认为问题是你从不移动imagepreloader.gif。这是我的解决方案，所有图像只有一个 imagepreloader.gif:

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;
}

告诉我它是否适合您的需求。我们可以进一步优化代码，但我现在想与您的代码保持密切联系。例如:如果单击另一个图像，我们可以从单击的图像中删除图像预加载器。