Question

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

我设法在我的页面上获得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);
  }

});

Answer 1

我不确定你可以获得多少速度，但你可以重写你的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);
   }
});

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

1 个答案: