Menu
I'm not referring to preloading images, I want to preload an HTML page using JQuery.
633
In the header you have to add <link rel="preconnect" href="https://example.com/"> Prefetch downloads the resource and stores it in the browser cache to use it later. You can do <link rel="prefetch" href="imgs/image.
In Google Chrome right click anywhere on the page and click on inspect element, this will bring up the developer tools. Right click on the body element and add a new attribute class="loaded" . Hit enter and you'll see our preloader screen disappear.
Chrome helps you open webpages faster by predicting where you might go next on the page. The browser preloads the page's data in the background, so the page can open immediately if you tap its link.
The preload value of the <link> element's rel attribute lets you declare fetch requests in the HTML's <head> , specifying resources that your page will need very soon, which you want to start loading early in the page lifecycle, before browsers' main rendering machinery kicks in.
Ajax the content in then use as you wish:
var myPrefetchedPage;
$.ajax({
url: "test.html",
cache: false,
success: function(html){
myPrefetchedPage = html;
}
})
myPrefetchedPage is now the full content - which can be injected into the current page (completely replacing the page if required.
If you are just trying to leverage caching as much as possible a hidden iFrame may work better. You can then use jQuery to cycle the iframe src to fetch multiple pages.
176
You could put everything in a div that is not visible, and once the document is ready, make the div visible - although this really isn't "pre-loading" - it is just not displaying anything until everything is loaded.
45
Why yes it is! You could do something like having an iframe for your content, fetching the content separately, and then filling the frame.
20
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
