jQuery的刪除重複的元素加載後

Question

我有一個插件，顯示我在360的3D視圖圖像。 如果我打開網頁，在加載36張圖片背景和加載圖片後的插件需要一個圖片，並顯示它。

所以，我的問題是，我可以在加載所有圖片之前在頁面上執行一些其他操作，並且在點擊帶有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); 
} 

任何人的想法，爲什麼是的browers凍結或者我可以/應該做的更好？

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>