CODEWITHSUNDEEP
javascriptjquery
wa-rren-dev
wa-rren-dev

Reputation: 327

jquery load - get fragment without parsing entire page

This is a bit of an open one but I've been at this for a few hours now.

I’m loading sections of a massive page with jquery load like such

$(‘#destination’).load(‘content.html #section-i-want’);

… The whole page is loaded into the client and then the bit we want is displayed.

The trouble is that this page is GIGANTIC and once rendered through Cordova into an HTML app it's running out of memory.

Is there a way to load a section of a document in without the client getting the full page first? I know that doesn’t particularly make sense but I thought I’d put it out there in case anyone has any ideas.

Any advice on this would be much appreciated!

Upvotes: 0

Views: 118

Answers (2)

bobjones
bobjones

Reputation: 503

Yes. you can break the content into smaller html files to load in to multiple sections, then load them in load()'s callback like this:

$('#destination-top').load('content-top.html', function() {
    $('#destination-middle').load('content-middle.html', function() {
        $('#destination-bottom').load('content-bottom.html' );
    });
});

By putting the lower sections in callback functions, jQuery will not load the middle until the top has finished, and will not load the bottom until the middle has finished.

But not only is that really hard to maintain and just all-around bad form, but it actually won't solve your core problem: You run out of memory. For that, understand that no amount of delayed loading or other creative solutions will solve this. Instead, you need to simply: load less content. That is your actual problem.

EDIT: I'm excluding the #section references because by not only is it syntactically wrong, but jQuery still has to retrieve the same amount of content, then parse it to find the #section to inject into the DOM which could be likely to consume a comparable amount of memory.

Upvotes: 1

Gary Storey
Gary Storey

Reputation: 1814

This will load only the content of #section-i-want:

$(‘#destination’).load(‘content.html #section-i-want’);

Upvotes: 0

Related Questions