Comments (8)
Hi @riddla, sorry for the late reply, totally missed this issue.
Thanks and I'm glad it works for you guys.
Your idea sounds great! quicklink by google could actually be a great source of inspiration here. I would probably make it possible to disable this behavior and current on hover preload by two separate options that would by default be both enabled.
To sum it up, if you're still up for it, please create a PR.
PS: If you'd like to share a link for your site with others as an example, I would be happy to include it in swup docs.
from preload-plugin.
Thanks for your insights. Do you mean an option to disable the [data-swup-preload]
alltogehter or just an option to disable the requestidlecallback
version of it?
const defaultOptions = {
useRequestIdleCallback: true,
useOnMouseOverPreload: true
};
// ... or ...
const defaultOptions = {
useDataAttributePreload: true,
useOnMouseOverPreload: true
};
from preload-plugin.
Ping @gmrchk :)
from preload-plugin.
Hi @riddla, damn I did it again... sorry man! I just started following you here on GH so I won't miss any of your great input anymore. 🙂
Well that really depends, in case preload plugin will have more opt-in options, each should probably have a way to disable that option.
However, since data attributes are already opt-in by design (as you need to add the attribute to specific links), I think the option is unnecessary there. Now that I think about it, the same kind of goes for the mouse over, because if you don't want to preload on hover, you simply don't include the preload plugin. In case useRequestIdleCallback
would be enabled, any link that you would be able to hover would already be loaded. This plugin already checks whether the page is already loaded and won't load it again, so no issue there.
TL/DR
I think it's enough to just limit the usage with only one option - useRequestIdleCallback
.
Just a note, we only need to load pages that are "loadable" by swup, so we should probably use the swup.options.linkSelector
in the plugins requestIdleCallback
handler.
from preload-plugin.
I finally found some time for the PR, see #5. The requestIdleCallback fork was running some weeks within a staged project of ours and doing fine in all major browsers.
from preload-plugin.
Sorry @riddla for this astronomical waiting time 😅 TIL that requestIdleCallback
actually serves to detect user inactivity, not network inactivity. Did you also have the misconception that it would actually detect network idle time? I'll leave this open for a few more days, in case you are still interested in a conversation.
from preload-plugin.
While requestIdleCallback
only makes a statement about the browser's internal activity, there's two options that I know of to approach network inactivity:
- Intercepting requests in a service worker to know when nothing is being requested. There's an npm package network-idle-callback that does most of the heavy lifting.
- Use the somewhat newer PerformanceObserver to intersect fetch events. See this StackOverflow example.
Not sure if that's overkill.
from preload-plugin.
Thanks for the pointer to PerformanceObserver
! Actually, this seems like the tool of choice for this kind of task.
Just implementing this for all swup.preloadPage()
calls wouldn't be sufficient, consumers might still want to control when a page preload request should be eager vs. lazy – so we would need some kind of modifier for the [data-swup-preload]
attribute. Something like [data-swup-preload=lazy]
comes to mind.
Not sure if that's overkill.
I agree. Closing this for now.
from preload-plugin.
Related Issues (20)
- `options.preloadVisibleLinks.enabled` not being applied automatically HOT 1
- Links with identical `href` will remove urls from `preloadVisibleLinks` queue even if these should actually be preloaded. HOT 1
- Preload stylesheets
- `options.preloadHoveredLinks` incorrectly set up HOT 4
- [Bug]: External links are not being properly ignored on hover HOT 5
- [Question] How to activate hover only preload HOT 2
- Prepare for new `shouldIgnoreVisit()` in swup@3
- Optimize the preload mechanism on desktop and mobile HOT 1
- `mouseover` is triggered multiple times on links with complex (nested) markup HOT 9
- Allow marking parent container to preload all children HOT 1
- Remove duplicated logic for handling fetch response HOT 1
- 'pagePreloaded' event doesn't pass any arguments HOT 2
- Priority queue
- Feature: preload links in viewport
- Feature: preload links on focus
- Possibility to ignore a certain link? HOT 1
- dist/index.module.js is missing HOT 2
- Bundling error with webpack
- requestIdleCallback not available in Safari HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from preload-plugin.