0

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

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

这是我的ajax函数。

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

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

这在本地主机上工作得很好，但是一旦我将它上传到我的远程服务器，问题就开始出现了。请专家指出我做错了什么？我尝试从中删除所有小动画，无济于事。

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

4

1 回答 1

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，最好只在片段中或片段中加载内容，因此不必在每次菜单单击时加载所有脚本.. 或加载数据并在内容中填充数据

您是否尝试过查看用于加载 HTML 片段的 jQuery load()方法，以便不必再次加载整个 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() .. 或测试两者

..

于 2013-10-18T16:51:24.497 回答