swup / preload-plugin Goto Github PK
View Code? Open in Web Editor NEWA swup plugin for preloading pages to speed up navigationΒ π
Home Page: https://swup.js.org/plugins/preload-plugin
License: MIT License
A swup plugin for preloading pages to speed up navigationΒ π
Home Page: https://swup.js.org/plugins/preload-plugin
License: MIT License
Describe your issue:
Right now, since mouseover
bubbles, it triggers multiple times on links with complex markup:
<a href="/my-path/">
<span>Link Text</span>
</a>
Here swup.on('hoverLink')
will be triggered as for the <a>
as well as for the <span>
A consumer-side workaround for that is to disable pointer events on the link's children:
a * {
pointer-events: none;
}
But maybe we can find a better solution that doesn't depend on the consumer-side implementation? mouseenter
wouldn't work with delegation, since it doesn't bubble.
Good greetings!
Love swup. I'm using v2 and noticed that when using the Preload plugin, the SSL lock disappears from the browser and time-outs are prompted in Wordpress. These issues are resolved once the Preload plugin is disabled/removed.
Any ideas as to why this is the case?
Would love to continue using the preload plugin, but these are major interruptions to workflow.
Please let me know!
Kind regards
Description of the issue
It seems the preloadHoveredLinks
option has not been set up correctly. If it's set to false
, links are still preloaded on hover.
This is because the mouse/touch/focus event delegates are created regardless of this option.
Additionally, when set to false
, it seems the option disables the preloading of links with the [data-swup-preload] attribute instead.
I don't believe this was intentional as the docs clearly state the preloading of these links should happen automatically.
Perhaps totally pointless, but this option could be optionally set as an object (similarly to preloadVisibleLinks
) to enable/disable
preloading on mouse/touch/focus independently:
new SwupPreloadPlugin({
preloadHoveredLinks: {
/** Enable preloading on mouse enter */
mouse: true,
/** Enable preloading on touch start */
touch: true,
/** Enable preloading on focus */
focus: true
}
})
How to reproduce the issue
Simply set preloadHoveredLinks: false
, open the Network tab in developer tools and see links still being preloaded as they're hovered on. Also, links with the [data-swup-preload] attribute will not be preloaded.
Before creating this issue...
Description of the issue
throttles
package from throttles/priority
How to reproduce the issue
^5.0
Suggested solution
Hi, I'm moving a site from the previous version of swup to the new one, and I've added the preload plugin but it doesn't seem to preload on hover anymore. Has this functionality been removed/broken?
Description of the issue
Imagine a sub page of a website where there is a link to let's say /
, both at the very start as well as in the footer of the document. preloadVisibleLinks
will never preload the first element on the page, even though it's in the viewport. The reason for that is that the the link to /
in the footer is not in the viewport and thus will immediately remove
the link again, just after it was added for the first link.
Workaround
Providing a data-swup-preload
attribute manually.
Possible Solution
Haven't thought about a solution, yet π ...but we definitely need one.
The docs for this plugin include an example for listening to the pagePreloaded
event like this:
swup.on('pagePreloaded', (page) => console.log('preloaded:' page));
which simply logs preloaded: undefined
The event is triggered from here in the code: https://github.com/swup/preload-plugin/blob/365df1f881fa4c6482de547e6a6fcbba6813457c/src/index.js#LL180C4-L183C32
const cacheablePageData = { ...page, url };
swup.cache.cacheUrl(cacheablePageData);
swup.triggerEvent('pagePreloaded');
Adjusting this last line to swup.triggerEvent('pagePreloaded', page)
or swup.triggerEvent('pagePreloaded', url)
seems to do the trick! (I'm not sure what kind of data was initially intended to be passed to that listener) It's a small thing but would be nice to be able to grab the page info.
I haven't made a demo or anything since I think it's pretty simple to see what's going on and replicate, but let me know if that would be helpful π Thank you for the awesome library/plugin!
First of, thanks for swup in general. We integrated it some days ago in one of our sites and it works like a charm.
I had the idea of using requestIdleCallback
for preloading other pages. What do you think? I would be happy to try it out in a fork and make a PR, if you are interested.
Describe the proposed solution
head
of preloaded pages for stylesheets and prefetch themAlternatives considered
page:preload
hookHow important is this feature to you?
If I am on a website https://example.com and I have an external link on that site, for example:
<a href="https://www.instagram.com/followme">@followme</a>
I'd expect preload plugin to ignore that link when I hover over it.
Currently the plugin will attempt to preload this URL:
https://example.com/{{path/of/external/link}}
So based on the example above this: https://example.com/followme
I suspect the problem lies within Location.fromElement
that is being used here:
Line 260 in 604d381
That function doesn't check if the provided URL is actually an internal URL or not.
I'll investigate further.
β― npm list | grep swup
βββ @swup/[email protected]
βββ @swup/[email protected]
βββ @swup/[email protected]
βββ @swup/[email protected]
βββ @swup/[email protected]
βββ @swup/[email protected]
βββ @swup/[email protected]
βββ @swup/[email protected]
βββ [email protected]
No response
No response
n/a
Although the plugin seems to work just fine, the following error is being thrown in Safari: Unhandled Promise Rejection: ReferenceError: Can't find variable: requestIdleCallback
, as the browser does not support requestIdleCallback.
See a related issue: remix-run/indie-stack#124 where a possible fallback is being suggested.
Thanks for all your effort on this, much appreciated!
First of all, great work on Swup.js!
I was wondering if it's possible to ignore a certain link from preloading? Ideally via a data attribute. My website has multiple links to PDF files, these can't be preloaded which throws errors in the console.
Any guidance would be appreciated!
Describe your issue:
Sometimes it's not necessary to preload or even not optimal (on mobile data), to preload all the annotated links.
So it possible to activate the hover-only link preload?
pagePreloaded
event, this would require chaining a single .then()
to the promise before passing it onDescribe the problem
Describe the proposed solution
focus
event handler that triggers a preloadHow important is this feature to you?
Parcel gives me this error on this package only. It works perfectly in 3.2.0 when I'm forcing it, so I'm assuming a regression.
Preload plugin needs to respect the new ignoreLink
option in swup@3.
Describe your issue:
During the last refactor I had the chance to investigate how preload plugin handles preloading pages if the visitor hovers a link:
mouseover
of a linkmouseover
event is also being triggered (in my tests around ~5ms before the click
event). Here the preload effect is minimal due to the near-immediate click
after mouseover
.Where I see some room for improvement:
1. On Desktop
If the visitor moves their mouse over a bunch of links towards the link they actually want to click, they will trigger a preload for the very first link they hovered during moving their mouse. This preload will have to finish before another preload can be started. I would propose that we introduce a slight delay (65ms 100ms) that will be reset every time another link is being hovered. That way, we increase the chance that the actual page the user wants to visit will be able to be preloaded and not be blocked by another running preload.
2. On Mobile
While the mouseover
event is being triggered before the actual click
event, the timespan could be improved by using touchstart
instead. That will give the preload ~80ms more time to load.
Props to instant.page for the inspiration :)
Describe the problem
Describe the proposed solution
How important is this feature to you?
Describe the problem
smart
preloadingDescribe the proposed solution
Alternatives considered
How important is this feature to you?
Description of the issue
IMO it's save to assume that initializing preload plugin like this:
new SwupPreloadPlugin({
preloadVisibleLinks: {
delay: 0,
},
})
...should automatically set preloadVisibleLinks.enabled
to true
. The plugin docs also suggest that behavior.
This is not the case right now. What's your opinion here @daun ?
Before creating this issue...
Allow setting the preload attribute on a parent.
<ul data-swup-preload>
<li><a href="/lorem/">Lorem</a></li>
<li><a href="/ipsum/">Ipsum</a></li>
<li><a href="/dolor/">Dolor</a></li>
</ul>
Probable solution:
- queryAll('[data-swup-preload]')
+ queryAll('a[data-swup-preload], [data-swup-preload] a')
A declarative, efficient, and flexible JavaScript library for building user interfaces.
π Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. πππ
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google β€οΈ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.