CODEWITHSUNDEEP
ajaxjquery
DriverBoy
DriverBoy

Reputation: 3177

browser stuck on ajax request

i developed a simple web site which uses ajax to load content and while the content is loading, i'm displaying a progress. Everything works as expected on 1st ajax call but after that, it becomes a mess

  1. page gets stuck on ajax call
  2. i've written a function to listen to ajax call and show loading message, it doesn't work too and the page becomes very laggy and slow after the 1st ajax call.

Here is my ajax function.

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

i tried to async to true but its true by default. still it didn't help. a demo of the problem can be seen at : REMOVED SINCE PROBLEM SOLVED

This works perfectly fine on the localhost but as soon as i uploaded it to my remote server,problems started to occur. can an expert please be kind point out what have i done wrong ? i tried removing all little the animations from this, non helped.

the problem was me loading javascript files on each ajax cal causing too many get and post requests and unnecessary dom changes.

Upvotes: 0

Views: 2747

Answers (1)

Jonathan Marzullo
Jonathan Marzullo

Reputation: 7031

your page seems to be slow with every click, because you are constantly loading JavaScript files on every click instead of just loaded the JavaScript once when the page loads, since you are grabbing the whole HTML page

like for instance.. every time you click on HOME .. these files are loaded in the page again..

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

if using AJAX its best to just load the content in or in fragments so not having to load all the scripts on every menu click .. or load the data and populate the data in the content

have you tried looking into the jQuery load() method for loading in HTML fragments so to not have to load in the whole HTML DOM again

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

like this:

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

the above would go to portfolio_item.html and grab the html fragment from the id #ID_of_content_to_grab and insert it into #load_area

UPDATE:

you can also try to empty the #load_area before you insert new content

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

or you can use jquery empty() .. or test both out

..

Upvotes: 1

Related Questions