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

【问题标题】：The right use of jQuery? Owl carouseljQuery的正确使用？猫头鹰旋转木马
【发布时间】：2013-12-14 15:44:10
【问题描述】：

对于我的项目，我使用 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);
  }

});

【问题讨论】：

我的第一个想法是，您不需要将$(document).ready 嵌入其中；这样做的目的是监听 DOM 就绪事件并在发生这种情况时运行函数内部的代码。 DOM 将为您触发一次，这就是所有三个轮播所需的全部内容。另外，看看您是否可以发现它们之间的共同代码（也许是 customDataSuccess）并定义一次。（您需要自定义 JSON 例程吗？）
是的，我知道 JQuery 很慢......但是轮播是使用 jQuery 编写的，我是开发中的初学者......也是我最后一次使用轮播...... carpeliam：我真的不需要 JSON 例程，因为我将所有数据存储在这一页之前的一页......但我不知道如何删除它......我尝试过的任何事情都导致代码不起作用......所以如果你知道答案:) 请告诉我:)
为什么重新定义 customDataSuccess 三次以及所有轮播都可以在单个 document.ready 函数中启动

标签： javascript optimization owl-carousel

【解决方案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);
   }
});

【讨论】：