正確使用jQuery？貓頭鷹旋轉木馬

對於我的項目，我使用貓頭鷹貓頭鷹。 http://www.owlgraphic.com/owlcarousel/#more-demos 正確使用jQuery？貓頭鷹旋轉木馬

我設法在我的頁面上獲得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); 
    } 

});

來源

2013-12-14 LitBe

我首先想到的是，你不需要在其內部嵌入'$（document）.ready';其目的是偵聽DOM就緒事件並在發生這種情況時在函數內部運行代碼。 DOM將爲您啓動一次，這就是您所有三個輪播所需的全部內容。另外，看看你是否可以在它們之間找到通用代碼（也許是customDataSuccess）並定義一次。（你需要一個自定義的JSON例程嗎？） – carpeliam

是的，我知道JQuery很慢......但是旋轉木馬是用jQuery編寫的，我是一個開發者......也是我最後一次使用傳送帶... carpeliam：我真的不需要JSON例程，因爲我在這之前存儲了所有數據一頁...但是我不知道如何刪除它...任何我嘗試導致代碼不工作... 因此，如果您知道回答:)請告訴我:) – LitBe

爲什麼重新定義customDataSuccess三次，並且所有傳送帶都可以在單個document.ready函數中啓動 –

我不知道多少，你可以得到速度但你可以重寫你的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); 
    } 
});

來源

2014-06-11 17:53:15 jkinz

正確使用jQuery？貓頭鷹旋轉木馬

回答

相關問題