CODEWITHSUNDEEP
javascripthtmlpreloadyslow
MrDoAlot
MrDoAlot

Reputation:

How to preload an ENTIRE web page

How can you preload an entire web page using JavaScript so that I can get that page cached in the users browser?

I know how to preload images with JS but what I would like to do is preload the entire page.

Use case: On my website, I have a google maps page with a lot of other content (images, css, JS) and it takes a long time (about 10 seconds) to load from a non-cached browser.

It's a subpage to my home page and users typically visit this page. So what I want to do is preload the entire page with all of the loaded content (images, JS) as much as possible so that it's cached in the users browser so that when they come to that page - it loads up much quicker. Loading the page from a cached browser cuts the time from around 10 second to 2 second.

Thanks in advance for any help.

Upvotes: 5

Views: 7978

Answers (2)

Harley Lang
Harley Lang

Reputation: 2333

Hidden <iframe/>'s are avoidable with either of two available javascript APIs: fetch or new XMLHttpRequest() .

Fetch is the most modern API at the moment and can be used like so:

<script>
  const url = './second_page.html';
  fetch(url, {credentials: `include`});
</script>

The alternative is to use XMLHttpRequest:

<script>
  const url = './second_page.html';
  req = new XMLHttpRequest();
  req.open(`GET`, url);
  req.send();
</script>

Either API returns the provided HTML file as a string. Going one step further, the returned HTML document can be traversed to precache images, videos, scripts, stylesheets, etc. too.

The source code for the javascript libraries instantclick and quicklink might be worth reviewing for ideas on how to optimize precaching html files:

Upvotes: 0

pts
pts

Reputation: 87221

Create an invisible or very small <iframe src="second_page.html"> on the main page.

Upvotes: 8

Related Questions