AJAX call stops page from loading other elements

Question

I'm building a website using Laravel and Jquery. The page is issuing multiple AJAX calls.

One of these calls can take multiple seconds and it seems to be blocking other elements of the page from loading. This includes images and other AJAX calls.

My code more or less looks like this.

$.ajax({
        async: true,
        url: url,
        data: {
            //data
        },
        success: function (response) {

        //Process response (append html, images, etc.)

        for (var key in response) {
            newAJAXCall(response[key]);
            }
        },
        error: function (xhr) {

        }
    });

newAJAXCall call looks like this:

$.ajax({
        async: true,
        url: url,
        data: {
            //data

        },
        success: function (response) {
            //Process response

        },
        error: function (xhr) {

        }
    });

newAJAXCall is what's causing the problem. Some of the calls are done within 200 ms. but some can take multiple seconds. When this happens, if any elements didn't load yet they stop loading.

In the case of images, the html for them is already existing. The browser just stops loading them until the AJAX call is done.

I already tried setting async and using a timeout but nothing seems to fix it. The problem happens both in Chrome and Safari so it doesn't seem to be browser specific.

EDIT: Even when the for-loop is removed and the new ajax call is only issued once the problem persists if the call lasts long.

EDIT2: Could it be possible that Laravel/Php is limiting the amount of connections a single client can open?

EDIT3: It seems to be my server which causes the problem. When I load the images from a different server than my own they load fine during the ajax requests.

What is in your newAJAXCall function? Have you also make it async? — Chris Chen, Feb 14 '17 at 23:57
It's a similar AJAX call except this one doesn't issue a new AJAX call. I set both to async. — Yoran, Feb 14 '17 at 23:58
I believe it's the for loop which are causing your problem. You may need to change the way you use newAJAXCall() http://stackoverflow.com/questions/4288759/asynchronous-for-cycle-in-javascript — Chris Chen, Feb 15 '17 at 00:02
This is something I thought of as well but when I take it outside the for-loop and only run it for one of the longer AJAX the problem persists. — Yoran, Feb 15 '17 at 00:05
Look to your console/timeline to see what exactly is blocking. — Kevin B, Feb 15 '17 at 00:16
Where exactly can I find this? It seems to be the second ajax call like I thought. When I look at the image it says it's stalled for 5 seconds which is the exact amount of time the second ajax call takes. Is it possible that Laravel is limiting the amount of connections a client can open? — Yoran, Feb 15 '17 at 00:19

score 0 · Answer 1 · answered Feb 15 '17 at 17:18

0

The problem was that my localhost server didn't have enough capacity. When the website runs on my dedicated server everything loads fine.

answered Feb 15 '17 at 17:18

Yoran

1
2

Chris Chen · Answer 2 · 2017-02-15T00:18:25.933

-1

As per my comment, please consider putting for loop within newAJAXCall success function

$.ajax({
    async: true,
    url: url,
    data: {
        //data
    },
    success: function (response) {

    //Process response (append html, images, etc.)


        newAJAXCall(response);
    },
    error: function (xhr) {

    }
});


function newAJAXCall(response) {
$.ajax({
    async: true,
    url: url,
    data: {
        //data

    },
    success: function (response) {

        for (var key in response) {
            //Process response[key]
        }

    },
    error: function (xhr) {

    }
});

}

edited Feb 15 '17 at 00:18

answered Feb 15 '17 at 00:06

Chris Chen

1,228
9
14

Thanks for your reply. However the for loop does not seem to be causing the problem. When I take it out and only run the ajax call once for one of the longer calls the problem persists. – Yoran Feb 15 '17 at 00:09
http://stackoverflow.com/questions/18366118/when-to-use-async-false-and-async-true-in-ajax-function-in-jquery I believe this is the answer then : ) – Chris Chen Feb 15 '17 at 00:14
async:false isn't used in this case, so, no that's not the answer. – Kevin B Feb 15 '17 at 00:15
Exactly. This doesn't seem to be the problem. When I change it to async=false you do see a difference because the entire div doesn't load until the call is done. – Yoran Feb 15 '17 at 01:16
emm... Could this be the reason then? http://stackoverflow.com/questions/7101573/jquery-async-call-only-parallel-when-urls-different http://stackoverflow.com/questions/9189591/multiple-ajax-requests-for-same-url – Chris Chen Feb 15 '17 at 01:18
1

I found out that my server is the problem. When I load the images from a different website they load fine during the ajax request. – Yoran Feb 15 '17 at 01:27

AJAX call stops page from loading other elements

2 Answers2