2013-02-11 51 views
0

我承認我對完整的ajax網站很滿意,所以我肯定會犯一些錯誤。

問題是這樣的:在 http://lamovida.arabianessence.com

每一頁都在使用此功能

function getAjaxPage() { 
    $('a.ajaxc').click(function() { 
$("li.page_block").find(".wrapper").fadeOut(400).remove(); 
    hideSplash(); 
    var $thishref = $(this).attr('href'), 
     $thisurl = $thishref.replace("#!/",""), 
     $urlArr = $thisurl.split('-'), 
     $urlOk = $urlArr[0], 
     $dataOk = $urlArr[1]; 

     $.ajax({ 
     url : $urlOk + ".php", 
    data : 'id='+$dataOk, 
    success : function (data,stato) { 
     $("#content").css({opacity:1}).fadeIn(400); 
     $("li.page_block").html(data); 
     $("li.page_block").css('visibility', 'visible'); 
     $("li.page_block").find(".wrapper").css({opacity:0}).show().animate({opacity:1},1000); 

       var $whgt = $(".wrapper").height(), 
        $ctop = (($(window).height() - $whgt) /2)-40; 

       $("#content").stop().animate({height: $whgt+40, top: $ctop},1000); 
       $("li.page_block").css('padding-top',20); 

       $('.scrollable').jScrollPane(); 
       $('.slider>ul>li').jScrollPane(); 

       getAjaxPage(); 
      }, 
      error : function (richiesta,stato,errori) {      
       alert(errori); 
      } 
     }); 
    }); 
} 

每次調用該函數的內容變得裝載機慢,加載後用$就調用大約20次點擊事情變得非常糟糕,並且加載時間不斷增長。

我試圖用谷歌瀏覽器的時間軸來分析這種情況,我發現每次點擊後瀏覽器都會使用更多的內存。如果我評論getAjaxPage();排在「成功」部分的情況開始變得更好,但當然我失去了所有的內部導航。

我該怎麼做才能避免這個問題?

非常感謝大家!

回答

2

每次撥打$('a.ajaxc').click()的電話號碼是都會添加新的事件處理程序因此每次點擊都會導致發出更多請求。第一次點擊後,每次點擊都會導致兩次請求。另一次點擊?另外三個請求。等

把處理功能外,你將有隻有一個每次點擊AJAX調用:

$(document).ready(function() { 
    $('a.ajaxc').click(getAjaxPage); 
}); 

我還沒有看到背後從回調中再次調用getAjaxPage的原因,因此將其刪除以避免無限循環的請求。

+0

感謝您的好評! 從回調中再次調用getAjaxPage()的原因是我需要使加載ajax的內容中的所有鏈接的行爲與主導航內容完全相同。有沒有辦法做到這一點? – MarcoMagnano 2013-02-11 16:00:41

+0

好吧,沒事。我使用.live()函數,並且所有東西都像charme一樣工作。 – MarcoMagnano 2013-02-11 16:16:41

+0

乾杯,但不要使用'.live()',因爲它已被棄用。改用'.on()'。 :) – 2013-02-11 19:23:53