Question

我开发了一个简单的网站，它使用ajax加载内容，当内容加载时，我正在显示进度。在第一次ajax调用时，一切都按预期工作，但在那之后，它变得一团糟

页面卡在ajax调用
我写了一个函数来监听ajax调用并显示加载消息，它也不起作用，并且在第一次ajax调用之后页面变得非常迟缓和缓慢。

这是我的ajax功能。

function loadPage(path) {
$.ajax({
    type: "POST",
    context: document.body,
    dataType: "html",
    timeout: 10000,
    url: path
});}

我试图异步到true但默认情况下它是真的。仍然没有帮助。可以在以下位置看到问题的演示：已解决问题已解决

这在localhost上完全正常，但是一旦我将其上传到我的远程服务器，问题就开始发生了。请问专家请指出我做错了什么？我尝试从这里删除所有的动画，没有帮助。

问题是我在每个ajax cal上加载javascript文件导致过多的get和post请求以及不必要的dom更改。

Answer 1

每次点击都会让您的网页速度变慢，因为您不断在每次点击时加载JavaScript文件，而不是在页面加载时加载JavaScript，因为您抓取整个HTML页面

例如..每次点击HOME ..这些文件再次加载到页面中..

POST http://3rsmj.com/new/home.html 

GET http://3rsmj.com/new/js/liquid/jquery.easing.1.3.js?_=1382114556389

GET http://3rsmj.com/new/js/liquid/jquery.touchSwipe.min.js?_=1382114556390

GET http://3rsmj.com/new/js/liquid/jquery.liquid-slider-custom.min.js?_=1382114556391

如果使用AJAX最好只是加载片段或片段中的内容，这样就不必在每个菜单上加载所有脚本点击..或加载数据并填充内容中的数据

您是否尝试过使用jQuery load（）方法加载HTML片段，以便不必再次加载整个HTML DOM

http://api.jquery.com/load/

像这样：

 $("#load_area").load("portfolio_item.html #ID_of_content_to_grab");

以上内容将转到 portfolio_item.html 并从ID #ID_of_content_to_grab 中抓取html片段并将其插入 #load_area

<强>更新

您还可以在插入新内容之前尝试清空#load_area

$("#load_area").html("");
$("#load_area").load("portfolio_item.html #ID_of_content_to_grab");

或者您可以使用jquery empty() ..或测试两者

...

浏览器卡在ajax请求上

1 个答案: