jQuery的正确使用?猫头鹰旋转木马

The right use of jQuery? Owl carousel

本文关键字：猫头鹰旋转木马 jQuery 更新时间：2023-09-26

对于我的项目，我使用OwlCarousel。http://www.owlgraphic.com/owlcarousel/#more-演示

我设法在我的页面上获得了3个旋转木马。但我觉得页面越来越慢了。我有可能走很多步吗？

实际上，我不需要读取json文件，因为我之前一页就将其存储在localStorage中。但我不知道如何在不损坏代码的情况下删除它。

因此，主要的问题是如何只调用一个jQuery来填充所有3个转盘？

这是我用来调用转盘的代码：

<div id="dodatni1" style="visibility:hidden" >
  <div id="owl-demo" class="owl-carousel" ></div>
</div> 
<div  id="dodatni2" style="visibility:hidden" >
  <div id="owl-demo2" class="owl-carousel" ></div>
</div> 
<div  id="dodatni3" style="visibility:hidden" >
  <div id="owl-demo3" class="owl-carousel" ></div>
</div>

这是转盘代码：

$(document).ready(function() {
  $("#owl-demo").owlCarousel({
    jsonPath : 'json/fakeData.json',
    jsonSuccess : customDataSuccess,
    lazyLoad : false
  });
  function customDataSuccess(data){
    var content = "";
    var stevec = 0;
    var dolzina = parseInt(localStorage.getItem('dolzina'));
    for(var j=0;j<dolzina;j++){
      if (stevec<10){
        var imgg ="http://www.spleticna.si/images/"+localStorage.getItem('imga'+j);
        var doza = localStorage.getItem('dozaa'+j);
        if (doza == 3239){
          content += "<a href='"produkt.html?id=" + j + "&slider=a'" target='frejm' onclick='pokaziiframe()'><img src='"" + imgg + "'" onError=this.src='napaka.png'></a>"
          stevec=stevec+1;
        }
      }
    }
    $("#owl-demo").html(content);
  }

});
$(document).ready(function() {
  $("#owl-demo2").owlCarousel({
    jsonPath : 'json/fakeData.json',
    jsonSuccess : customDataSuccess,
    lazyLoad : false
  });
  function customDataSuccess(data){
    var content = "";
    var stevec = 0;
    var dolzina = parseInt(localStorage.getItem('dolzina'));
    for(var j=0;j<dolzina;j++){
      if (stevec<10){
        var imgg = "http://www.spleticna.si/images/" + localStorage.getItem('imga'+j);
        var doza = localStorage.getItem('dozaa'+j);
        if (doza == 2615){
          content += "<a href='"produkt.html?id=" + j + "&slider=b'" target='frejm' onclick='pokaziiframe()'><img src='"" + imgg + "'" onError=this.src='napaka.png'></a>"
          stevec=stevec+1;
        }
      }
    }
    $("#owl-demo2").html(content);
  }

});
$(document).ready(function() {
  $("#owl-demo3").owlCarousel({
    jsonPath : 'json/fakeData.json',
    jsonSuccess : customDataSuccess,
    lazyLoad : false
  });
  function customDataSuccess(data){
    var content = "";
    var stevec = 0;
    var dolzina = parseInt(localStorage.getItem('dolzina'));
    for(var j=0;j<dolzina;j++){
      if (stevec<10){
        var imgg = "http://www.spleticna.si/images/" + localStorage.getItem('imga'+j);
        var doza = localStorage.getItem('dozaa'+j);
        if (doza == 3140){
          content += "<a href='"produkt.html?id=" + j + "&slider=c'" target='frejm' onclick='pokaziiframe()'><img src='"" + imgg + "'" onError=this.src='napaka.png'></a>"
          stevec=stevec+1;
        }
      }
    }
    $("#owl-demo3").html(content);
  }
});

我不确定你能得到多大的速度，但你可以重写你的JS:

$(document).ready(function(){
    //Assuming they all use the same data source/settings?
    $("#owl-demo3,#owl-demo2,#owl-demo1").owlCarousel({
        jsonPath : 'json/fakeData.json',
        jsonSuccess : customDataSuccess,
        lazyLoad : false
    });
    function customDataSuccess(data){
        var content = "";
        var stevec = 0;
        var dolzina = parseInt(localStorage.getItem('dolzina'));
        for(var j=0;j<dolzina;j++){
            if (stevec<10){
                var imgg = "http://www.spleticna.si/images/" + localStorage.getItem('imga'+j);
                var doza = localStorage.getItem('dozaa'+j);
                if (doza == 3140){
                    content += "<a href='"produkt.html?id=" + j + "&slider=c'" target='frejm' onclick='pokaziiframe()'><img src='"" + imgg + "'" onError=this.src='napaka.png'></a>"
                    stevec=stevec+1;
                }
            }
       }
       $("#owl-demo3").html(content);
   }
});