여러 이미지에 대해 동일한 onclick js 함수

Question

나는 갤러리를 가지고있다. 이미지를 클릭하면 로딩 gif를 표시하고 싶습니다. 나는 다음과 같이 자신의 ID로 모든 이미지에 동일한 onclick 기능을 전달하고있다 :

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

이

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

자바 스크립트 :

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

이 당신을 맞는 말해 경우에 여기 내 솔루션은 모든 이미지에 대해 하나의 imagepreloader.gif을하는 것입니다 필요합니다. 코드 최적화로 더 나아갈 수는 있었지만 현재는 코드에서 멀리 떨어져 있어야합니다. 예를 들어 다른 이미지를 클릭하면 클릭 한 이미지에서 이미지 프리 로더를 제거 할 수 있습니다.