複数の画像と同じ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; 

。 しかし、問題は、2番目の画像をクリックしているときです.gifは最初の画像で実行されていて、2番目の画像では実行されていません。この問題を解決するには？各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; 
} 

それはあなたに合っている場合を教えてくださいニーズ。コード最適化をさらに進めることができましたが、私は今のところあなたのコードから近づきたいと思っていました。たとえば、別の画像がクリックされた場合、画像プリローダーをクリックした画像から削除することができます。