-
-
Notifications
You must be signed in to change notification settings - Fork 477
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
CSS file doesn't load on page transition #410
Comments
As far as I'm aware, everything will need to be loaded outside of the container. Combine your CSS files into one and it'll work fine. In my opinion, this is only adding more http requests every time the user goes to another page, increasing the load time. As for JS, it won't be re-evaluated when a transition completes, so it too will have to be compiled and loaded outside of the container. You'll have to reinitialize any functions using barba hooks. On barba v1:
on barba v2:
|
I agree with @c0mrx, Just one file for CSS and another one for JS = no more https requests when you switch between pages. Anyway, this is a feature that will be implemented soon in the v2, called 😉 |
Any update about the @barba/head addition? I have a similar issue. I have some 'detail' pages that get some inline styles injected. The styles get inject in the head and are specific for each 'detail' page. So it should reload the head on every 'detail' page. |
Hi @Geestig, Still a feature to implement into the library, but no roadmap specified for the moment. Thanks for using Barba and for your patience 😉 |
Do you happen to have a temporary solution/idea for my issue? I was thinking on using the beforeEnter hook to check the incoming HTML for the style tag en inject it into the head of the page. And remove it afterwards with the afterLeave hook. |
Using the Be sure to properly remove the styles on the
|
@Geestig there's no need,technically or otherwise, to make things more complicated and parse out Since you already fetch additional files from the server, using sth. like <style>@import "page-foo.css"</style>
<style>.bar {color:fuchsia}</style>
... the remaining HTML for that page ... or <link rel="stylesheet" href="page-foo.css" media="all" >
... the remaining HTML for that page ... None of this would bring down the page (nor server), yet Don't be too religious about minimizing HTTP requests :) Enjoy. |
@WebMechanic thanks for the reply, but it was a style that was added upon load automatically. I solved it by simply filtering it out of the head and adding it to the currect active head as @xavierfoucrier had suggested. |
This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions. |
Hi there, |
Hi @ouun, It steel planned of course, but not in the next few months, sorry. Thanks for your interest into Barba 😉 |
This comment has been minimized.
This comment has been minimized.
Hi @OutdatedDesigns, Please use the Slack workspace in order to ask the whole community for support. Join using the invite link here: https://barba.js.org/docs/getstarted/useful-links/#Developer. Thanks! 😉 |
This comment was marked as off-topic.
This comment was marked as off-topic.
Hi @mudlabs, This if off-topic here 😉 And no, this is not a problem for SEO to not have head title and meta tags updated with the current page, see https://barba.js.org/faq/#What-about-SEO-concerns. |
A solution I came up with for my needs here: I had a problem with web components (custom HTML elements) not initializing when their script tags were in the barba-container. Here's what worked:
I'm pretty sure this solves the primary problem of the script not being executed, by creating a new script tag in the header for each script tag being loaded in the body. (It seems as if the body HTML is being loaded in such a way that re-executing scripts doesn't happen, which is normal for AJAX replacement). Some thoughts:
|
Hi guys, I needed to load inline scripts on each Barba transition. Inspired by @evankford, I came up with the solution below. Also related to #485.
I hope it helps. Any progress on the |
Bumping this request |
Yes, it's still planned, no need to bump again. Thanks again for your patience 😉 |
Thanks @stepanjakl I'm also working to get |
Any further updates on this? I think now with http2, there's not as much need to have everything bundled into a single file and progressively load scripts based on the page your on, including using CDNs. Forgive me if I'm wrong, but hasn't this been planned for 2 years or more? |
@aaronstezycki As soon as we will find time to work on this, but since Barba v2 release, it is not a priority: this explained why we haven't worked on this since the beginning. Even with Anyway, the issue is still opened and we know that in certain cases, the
|
Okay, that's a fair answer. :) I would say though, the everything in this statement could be argued against. Http2 was created to allow for more freedom to separate files and suffers less from multi-file bottlenecks. Like you proceed to say, depends on the app though. Large libraries/scripts would preferably be only downloaded on the page they are being used on, i.e login scripts, large SPA's etc. Anyway, thanks for reply, .ps I'd be up for donating page. |
Thanks @aaronstezycki 😉 I am not an expert in Currently, there is no donating / collective page for the BarbaJS project, but you can support maintainers using Github Sponsors, what I highlighted in the beginning of 2022 here on Slack: https://barbajs.slack.com/files/TFDHZ8NN5/F030B08EB8U.
Thanks anyway for your support in open source projects! ✌️ |
I'm trying to integrate Barba in a Shopify theme. Even though I bundle css & js to a single file, Shopify also ads their own script tags to the head depending on the page type. (For example: On product page support for accelerated payment methods like Apple Pay, Marketing pixels for tracking, Cart functionality etc) The |
This comment was marked as duplicate.
This comment was marked as duplicate.
This comment was marked as duplicate.
This comment was marked as duplicate.
This comment was marked as duplicate.
This comment was marked as duplicate.
1 similar comment
This comment was marked as duplicate.
This comment was marked as duplicate.
This comment was marked as duplicate.
This comment was marked as duplicate.
This comment was marked as duplicate.
This comment was marked as duplicate.
Thanks! |
Hi, I have a problem with the css and js files. I would like to use different style sheets and scripts on the various pages. when I open the page everything normally works, but when I change the page using the transition it is not loaded. How can I solve it?
for example
in the contact page i want to use contact.css. contact.css is used only in this page. when I access the page directly the css works correctly but when i came from (for example) index.html that doesn't have contatti.css the style doesn't load.
The text was updated successfully, but these errors were encountered: