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

我从代码中删除了一些值并创建了一个基本结构。检查这是否是您正在寻找的解决方案

＆＃13;

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

＆＃13;

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

＆＃13;

jquery在加载后删除重复的元素

1 个答案: