jquery - 使用 jquery.load() 加载 div

Question

我创建了一个网页并使用 load() 函数将页面加载到固定 div 上。但是在连续点击不同的链接时……整个网页停止响应。

这是我加载页面的代码：

$( document ).ready( function() {  

        $('a').bind('click' , function( e ) {
            e.preventDefault();   // prevent the browser from following the link
            e.stopPropagation();  // prevent the browser from following the link

            $( '#part1' ).load( $( this ).attr( 'href' ) );
        });
    });

当我单击上述 load() 函数的链接时，我还想更改 url。

Answer 1

通过连续单击，您将添加一堆在后面运行的异步请求。它们都需要处理。#part1因此，每次请求返回时，浏览器都会将其内容添加到并呈现它。这可能是页面没有响应的原因。

编辑

您可以显示一个指示器，让用户知道他正在做某事并防止再次执行加载。以下示例显示了在加载零件时防止执行加载。

$( document ).ready( function() {  
    var isLoading = false;

    $('a').bind('click' , function( e ) {
        e.preventDefault();   // prevent the browser from following the link
        e.stopPropagation();  // prevent the browser from following the link
        if(!isLoading){
           //start loading
           isLoading = true;
           $( '#part1' ).load( $( this ).attr( 'href' ), function(response, status, xhr) {
               //this is the callback method for success or failure
               //stop loading
               isLoading = false; 
           });
        }
    });
});

指标的显示/隐藏不应该那么难添加。开始加载时显示，停止加载时隐藏。