Question

我在jquery中写了这个相当简单的灯箱类型函数：

//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的数据但是如果你在第4次之后打开一个链接它会慢下来，在第6或第7次之后它几乎会崩溃浏览器。我对此很新。如何完全摆脱旧数据或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没有任何区别。

有什么想法吗？我必须以某种方式创建一个循环。但我不知道如何。

谢谢。

克雷格

Answer 1

通过你的代码看，我猜你的jQuery选择器会减慢你的速度。加载.load()次呼叫后，应删除所有旧内容并将其替换为新内容。所有jQuery选择器都基于类名进行全局查询 - 这通常很慢（即使选择器没有匹配很多元素）。尽可能尝试按ID引用元素（使用#语法），如果要选择多个元素，可以根据标记名称和类名进行选择，如下所示：

$("div.lightbox_bg");

看看是否有帮助。但是你描述的行为很奇怪，它不应该每次都减慢那个，因为你每次只增加一个div。无论如何让我知道你怎么走。

Answer 2

FWIW，当返回的AJAX片段包含对已加载页面已引用的资源的脚本引用时，我遇到了类似的问题。一旦我确保我没有“重新引用”AJAX片段中的脚本，问题就消失了。

jquery .load（）在多次加载后变慢

2 个答案: