jQuery的.load（）多個負載後減慢

我寫了jQuery的這個相當簡單的燈箱式功能：jQuery的.load（）多個負載後減慢

//LIGHTBOX FUNCTION 
$(document).ready(function() { 
    $('.litebox').click(function(event) { 

     if ($('.lightbox_bg').length > 0) { 

      $('.lightbox_content').empty(); 
      $('.lightbox_bg').empty(); 


      var link = $(this).attr('href'); 

      $('.lightbox_bg').fadeIn('slow'); 
      $('.lightbox_content').fadeIn('slow'); 

      $('.lightbox_content').load(link); 
      event.preventDefault(); 

     } else { 

      $("body").append("<div class='lightbox_bg'></div>"); 
      $("body").append("<div class='lightbox_content'></div>"); 

      var link = $(this).attr('href'); 

      $('.lightbox_bg').fadeIn('slow'); 
      $('.lightbox_content').fadeIn('slow'); 

      $('.lightbox_content').load(link); 
      event.preventDefault(); 

     } 

    }); 

    $("a#close-panel").click(function() { 

     $('.lightbox_content').fadeOut(300).empty(); 
     $('.lightbox_bg').fadeOut(300).empty(); 

    }); 

});

我加入了.empty嘗試清空div的數據，但如果你打開在第四次連接後，它會減慢速度，在第六次或第七次之後，它會幾乎崩潰瀏覽器。我對此很新。我如何完全擺脫舊數據或div，以便它不會放慢速度。我不想刷新瀏覽器頁面。如果我刷新它可以解決問題，但必須有更優雅的解決方案。

任何幫助，將不勝感激。

謝謝！

克雷格

編輯：

行，所以我簡化了代碼一點，並增加了一些警報，看看發生了什麼事。這是新的代碼。

//Lightbox Function 

$(document).ready(function(){ 

$('.litebox_edit').click(function(event){ 

    var link = $(this).attr('href'); 

    if($('.lightbox_bg').length == 0){ 

     alert('No box'); 

     $("body").append("<div class='lightbox_bg'></div>"); 
     $("body").append("<div class='lightbox_content'></div>"); 

    } 

     alert('box exists'); 

     $('div.lightbox_bg').fadeIn(300); 
     $('div.lightbox_content').fadeIn(300).load(link); 


event.preventDefault(); 

}); 



$("a#close-panel").click(function(){ 

    $('div.lightbox_content').fadeOut(300); 
    $('div.lightbox_bg').fadeOut(300); 


}); 
});

所以會發生什麼是你第一次點擊一個鏈接，它說戒備「無盒」單擊確定，然後它說：「存在盒」警報，然後它顯示收藏夾。

然後你關閉這個盒子。現在，當你再次單擊鏈接時，它表示Box存在，然後單擊確定，然後再次顯示「框存在」，然後顯示該框。

然後，第三次點擊鏈接時，它會顯示「框已存在」3或4次，並且每次關閉該框並重新點擊鏈接時，該鏈接都會不斷增加。

將.lightbox_bg中的標籤更改爲#lightbox_bg沒有區別。

任何想法？我必須以某種方式創建一個循環。但我不知道如何。

謝謝。

克雷格

來源

2011-08-26 Craig Russo

使用螢火蟲檢查ajax請求。任何遞歸正在發生 – Gowri

通過你的代碼的樣子，我猜是什麼放慢你失望是你的jQuery選擇。進行調用後，應該刪除所有舊內容並用新內容替換它。你所有的jQuery選擇器都是基於類名進行全局查詢 - 這通常很慢（即使選擇器沒有匹配很多元素）。儘可能嘗試引用由ID元素（使用#語法），如果你想選擇多個元素，你可以選擇一個基於標籤的名字和這樣的類名：

$("div.lightbox_bg");

看看是否有幫助。但是你描述的行爲很奇怪，它不應該每次減慢那，因爲你每次只增加一個div。無論如何，讓我知道你是如何去的。

來源

2011-08-26 04:52:42 Johnus

我將所有'.lightbox_bg'更改爲「#lightbox_bg」，並且我更改了'。lightbox_content「改爲」#lightbox_content「，問題依舊。到第四次打開一個鏈接時，它是第七次大麥加載。 –

FWIW，當返回的AJAX代碼片段包含已加載頁面引用的資源的腳本引用時，我遇到了類似的問題。一旦我確保我沒有「重新引用」AJAX代碼片段中的腳本，問題就消失了。

來源

2012-09-09 23:23:18 Riko

jQuery的.load（）多個負載後減慢

回答

相關問題