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

尝试使用它，如果它可以工作，

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

你的剧本将是这样的;

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

我认为问题是你永远不会移动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;
}

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

同一个onclick js函数用于多个图像

2 个答案: