我开发了一个简单的网站,它使用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更改。
答案 0 :(得分: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
像这样: $("#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() ..或测试两者
...