jqueryは読み込まれた後に重複要素を削除します

Question

私は360の3Dビューで画像を表示するプラグインを持っています。 ウェブページを開くと、背景が36枚の写真を読み込んでおり、写真を読み込んだ後、プラグインは1枚の写真を撮って表示します。

私の問題は、すべての画像がロードされ、ajaxでボタンをクリックした後で他のデータを読み込む前に、ページ上で他の操作を行うことができ、私はHTMLコードに重複したエントリを取得し、いくつかの画像が表示され、このようなものではありません（このコードは3Dプラグインを生成します）。

<div> 
<div rel="0" style="position: absolute; width: 100%; height: 100%; display: none;"> 
    <img src="img0.png" class="3dweb"> 
</div> 
<div rel="1"> 
    <img src="img1.png" style="position: relative; width: 100%; height: auto;" class="3dweb"> 
</div> 
<div rel="2" style="position: absolute; width: 100%; height: 100%; display: none;"> 
    <img src="img3.png" style="position: relative; width: 100%; height: auto;" class="3dweb"> 
</div> 
<div rel="3" style="position: absolute; width: 100%; height: 100%; display: none;"> 
    <img src="img3.png" style="position: relative; width: 100%; height: auto;" class="3dweb"> 
</div> 
<div rel="1" style="position: absolute; width: 100%; height: 100%; display: none;"> 
    <img src="img1.png" style="position: relative; width: 100%; height: auto;" class="3dweb"> 
</div> 
<div rel="3" style="position: absolute; width: 100%; height: 100%; display: block;"> 
    <img src="img3.png" style="position: relative; width: 100%; height: auto;" class="3dweb"> 
</div> 
<div rel="3" style="position: absolute; width: 100%; height: 100%; display: block;"> 
    <img src="img3.png" style="position: relative; width: 100%; height: auto;" class="3dweb"> 
</div> 
<div rel="0" style="position: absolute; width: 100%; height: 100%; display: block;"> 
    <img src="img0.png" style="position: relative; width: 100%; height: auto;" class="3dweb"> 
</div> 

私の解決策は、すべてのイメージがロードされた後、私は重複したエントリを削除し、唯一の絵を示すことでした。

問題は、私のjavascript/jqueryコードがブラウザをフリーズし、なぜ、おそらく私はそれがより良い解決策を与えると思いますが、私はより良い解決策を見つけることができないということです。たブラウザが凍結されているか、私は/より良いを行う必要があります可能性がある理由を

私のjavascript/jqueryのコード

var myVar = setInterval(function(){ myTimer() }, 4000); 

function myTimer() { 
    if($('[rel=35]').length > 0) { 
    $('.js-loading-car-image').css("display","none"); 
    var x = 1; 
    var i = 0; 
    while (i < 35) { 
     var tmp = $('[rel='+i+']').next(); 

     if($(tmp).attr("rel") == x) { 
      x++; 
      i++; 
     } else { 
      $('[rel='+i+']').next().remove(); 
     } 
    } 

    for(var i=0; i<36;i++) { 
     var display = $('[rel='+i+']').css("display"); 
     if(display=="block") { 
      $('[rel='+i+']').css("display", "none"); 
     } 
    } 
    $('[rel=26]').css("display","block"); 


    $('.js-3d-images').fadeIn("slow"); 
    myStopFunction(); 
    } 
} 

function myStopFunction() { 
    clearInterval(myVar); 
} 

誰のアイデア？

Answer 1

コードからいくつかの値を削除し、基本的な構造を作成しました。私の理解によると、これはあなたが

var dataset = $('#image-data > div'); 
 
var rel = []; 
 
for(var j = 0 ; j < dataset.length; j++){ 
 
    var x = $(dataset[j]).attr('rel'); 
 
    if(jQuery.inArray(x, rel) >= 0){ 
 
    $(dataset[j]).remove(); 
 
    } 
 
    rel.push(x); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="image-data"> 
 
<div rel="0"> 
 
    <img src="img0.png" alt="rel 0"> 
 
</div> 
 
<div rel="1"> 
 
    <img src="img1.png" alt="rel 1"> 
 
</div> 
 
<div rel="2"> 
 
    <img src="img2.png" alt="rel 2"> 
 
</div> 
 
<div rel="3"> 
 
    <img src="img3.png" alt="rel 3"> 
 
</div> 
 
<div rel="1"> 
 
    <img src="img1.png" alt="rel 1"> 
 
</div> 
 
<div rel="3"> 
 
    <img src="img3.png" alt="rel 3"> 
 
</div> 
 
<div rel="3"> 
 
    <img src="img3.png" alt="rel 3"> 
 
</div> 
 
<div rel="0"> 
 
    <img src="img0.png" alt="rel 0"> 
 
</div> 
 
</div>