Question

我正在使用以下功能在点击时将内容加载到#canvas：

jQuery(document).ajaxComplete(function(){

    jQuery('.tabs a').on('click',function(e) {
        e.preventDefault();
        jQuery('.tabs a').removeClass('active');
        jQuery(this).addClass('active');
    });

    jQuery('#blog').on('click',function(e) {
        jQuery('#canvas').load('blog.php');
    });
    jQuery('#news').on('click',function(e) {
        jQuery('#canvas').load('news.php');
    });
    jQuery('#gallery').on('click',function(e) {
        jQuery('#canvas').load('gallery.php');
    });

});

HTML：

<ul class="tabs">
     <a id="blog">Blog</a>
     <a id="news">News</a>
     <a id="gallery">Gallery</a>
</ul>

<div id="canvas"></div>

在前几次单击选项卡时，此工作正常。但是，单击选项卡的次数越多，内容加载到#canvas的速度就越慢。最终，#canvas内容开始在每个页面之间轻弹。

任何想法可能是什么问题？

我尝试用ajax替换load方法并将缓存设置为false，但问题仍然存在：

jQuery('#blog').on('click',function(e) {
    jQuery.ajax({
        url: 'blog.php',
        cache: false,
        success: function(result) {
            jQuery('#canvas').html(result);
        }
    });
});

Answer 1

您正在Ajax完成事件中连接事件处理程序，因此每次运行Ajax调用时，都会有多个事件处理程序附加到您的元素。 1然后是2，然后是3，然后是4个处理程序等在每个上做同样的事情。这种不必要的重复最终会使您的网页速度变慢。

在Ajax调用之外使用委派的事件处理程序。

e.g。

jQuery(document).on('click', '.tabs a',function(e) { e.preventDefault(); jQuery('.tabs a').removeClass('active'); jQuery(this).addClass('active'); }); jQuery(document).on('click', '#blog', function(e) { jQuery('#canvas').load('blog.php'); }); jQuery(document).on('click', '#news', function(e) { jQuery('#canvas').load('news.php'); }); jQuery(document).on('click', '#gallery',function(e) { jQuery('#canvas').load('gallery.php'); });

您根本不需要jQuery(document).ajaxComplete(function(){。

委托事件处理程序通过监听事件（例如click）来冒泡到祖先元素（document是默认值，如果没有其他更接近/方便的话）。然后它在事件时应用jQuery选择器，因此该项只需要存在。然后，它将事件的回调函数仅应用于导致事件的匹配元素。

注意：不要将body用于委派事件，因为它有严重错误。

jQuery ajax / load越来越慢

1 个答案: