jquery entfernen doppelte Elemente nach geladen

Question

Ich habe ein Plugin, das mir Bilder in einer 360 3D-Ansicht zeigt. Wenn ich die Webseite öffne, werden im Hintergrund 36 Bilder geladen und nach dem Laden der Bilder das Plugin ein Bild aufnehmen und anzeigen.

Also, mein Problem ist, dass ich einige andere Aktionen auf der Seite tun kann, bevor alle Bilder geladen sind und ich einige andere Daten laden, nachdem ich auf eine Schaltfläche mit AJAX und wenn ich andere Aktionen vor alle Bilder geladen sind, Ich erhalte doppelte Einträge im HTML-Code und einige Bilder werden angezeigt und andere nicht so (dieser Code erzeugt das 3D-Plugin).

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

meine Lösung war, dass, nachdem alle Bilder geladen sind, i die doppelten Einträge löschen und zeigen nur ein Bild.

das Problem ist, dass mein Javascript/jquery Code den Browser einfrieren und ich weiß nicht warum, vielleicht denke ich, es gibt eine bessere Lösung, aber ich habe keine bessere Lösung.

mein Javascript/jquery Code

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

Wer Ideen, warum die Browers frieren oder die ich könnte/sollte es besser machen?

Answer 1

Ich habe einige Werte aus Ihrem Code entfernt und eine Grundstruktur erstellt. Überprüfen Sie, ob dies die Lösung, die Sie suchen

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>