Comments (13)
Hi, it wouldn't be right to replace head content ahead of time, as some styles from the previous page could be removed before it's needed for example.
I would recommend to include the styles for all the pages everywhere if you can, but I get why you want to avoid it. Maybe including styles for layout only in a separate file on all pages?
This native prefetch sounds like it could be useful here, but I'm not sure about support or if it would help.
from head-plugin.
Hello Sir,
I am facing the same problem, plus I am a beginner web designer so, after the update of swup from ver 2 to 3 i am facing swup initializing issue and the one as mentioned above due which i am extremely sad and need your help.
from head-plugin.
I believe this should be handled in v3 and the new version of plugin, but @daun should know more details on that.
from head-plugin.
Yes, from swup 3 onwards, the head plugin supports waiting for stylesheets to load before transitioning to the new page.
from head-plugin.
Thanks for the reply sir,
as I mentioned before I am swup 3 initialization issues, swup 2 initiates without any problems but ver 3 only seems to work ok with the swup cdn link, if I try using it from dist. folder there are multiple swup files as swup.cjs, swup modern.cjs and swup umd.cjs but none of them seems to initialize easily as in swup 2.
from head-plugin.
Plus about the css load and swap with each transition, Things are fine but what concerns me is a small milliseconds flash of css load which seems to occur mostly after 4-5 clicks/transitions from one link to another.
from head-plugin.
Plus, can you please share the code to add multiple plugins to swup as I am trying but guessing that I am doing mistakes.
from head-plugin.
swup.test.mp4
from head-plugin.
1): You can clearly see the flash at 4-6 click which becomes sort of persistent afterwards.
2): As showed the console is giving a message of transition duration missing for element of transition-selector but in my CSS I have defined it.
3): in the script.js I have put some code under comments as I failed to execute and it is about the preload plugin as somehow I thought it could fix the flash issue but can't get it to work
4): If pause and watch the html you may see that I am using cdn swup links instead of the downloaded package. Its because it is not initializing in the first place.
5): Last but not least, you can see the font size sort of growing after each transition which seems like an animation but no, its not, in my opinion, its basically the restoration of defined font size after the CSS is being loaded which sort of demonstrates the swap delay.
from head-plugin.
@CodersRage Please create a new discussion on the swup repo; that way other users can offer advice about your setup. If you think you've found an actual bug, feel free to create a separate issue with a reproducible teast case.
from head-plugin.
ok sir
from head-plugin.
but how can i post that reproducable file?
from head-plugin.
@CodersRage you can use and fork this CodeSandbox template: swup-test-case-template
from head-plugin.
Related Issues (7)
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 head-plugin.