Accessing the preloaded page from Cache

[andrew-ireland]

Hi there, first of all, thank you for your work on swup — It's been a joy to work with so far! I have a question about using the 'preloadPage' functon I was hoping you may be able to enlighten me about.

For a portfolio site I'm building, within a project page I'd like to reveal an image from the next project page (next #swup container) when hovering the 'next project' link (kind of like peeking into the next page). On clicking the link, I would then completely transition to the next project.

Currently, I am using the following to preload the next project into cache on the intial load:

 swup.on('contentReplaced', function () {
    var nextProject = $('.next-project-title a').attr('href');
    defaultInit();
    swup.options.elements.forEach((portfolio) => {
        horizontalScroll();
        // once project loaded request and save next project to cache
        swup.preloadPage(nextProject)
    })
});

From here though, I'm struggling to work out how I could access the preloaded object to attach it to the DOM manually — is this achievable with swup? If you could point me in the right direction/advise I would be very grateful!

Best, Andrew

[Geestig]

Would be very interested in this as well. I've been searching through swup.cache but to no avail.

[gmrchk]

Hi,

TIP: You can add a data data-swup-preload to a link, and swup will automatically preload it if the preload is enabled.

You can find the contents of the cached pages of swup inside swup.cache.pages in a form of an object. Each page consists of:

• blocks - prepared html blocks for replacement
• originalContent - original html received from server
• pageClass - class attribute of body tag
• title - title of the page
• url - URL of the page

Most important to you is the originalContent which you can use as you desire.

Looking at your use case, it could be useful to have preloadPage method return a Promise, so you can run some code once the page is loaded. I will implement that in the next few days.

[gmrchk]

preloadPage method now returns a Promise, so you can do something like:

swup.preloadPage(nextProject).then(pageObject => {
    console.log(pageObject.originalContent); // prints the whole html of page as received from server
})

In case the page is already in cache, Promise will resolve right away. Otherwise it will wait for the page to load.

Please update swup/swupjs.

Does this answer your question?

[andrew-ireland]

Thank you for that Georgy, that looks perfect!

[Geestig]

Great addition!

I do wonder if there is a way to actually get information about a certain element as if it would not be animated.

For example: you parse the originalContent and querySelect a certain element. However when you do this the getBoundingClientRect() of this element would return all zero's since the object is not actually on the page already.

[andrew-ireland]

Hey @gmrchk, I've ended up implementing data-swup-preload attribute to links that should be preloaded in the internal pages of my website based on your TIP! The call works as expected, however, I'm running into issues where a page is preloaded by hovering over the link (which is required from the homepage=>inner pages) — this is returning errors in the console when trying to load images on the next page.

On each inner page I'm preloading images are referenced relative to the page (this is automatically handled using hugo). When I hover over a link to preload, it attempts to load these images based on the current url slug, not that of the next page (which of course results in a GET 404 Not Found error).

Is there anything I can to do resolve this on my end, or would this need be addressed in swup? When preloading based on the 'data'swup-preload' attribute there aren't any errors in the console, and it appears to preload correctly.

Please let me know if you need anything from me to assess. I'm happy to DM you a link to my private dev server which shows the issue. I haven't got time to build a test case currently, but will do so if requested.