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（）多个负载后减慢

回答

相关问题