Looks like doc.ready fires before CSS has been applied, how can I avoid it?

sage
1

I’ve been using Sage few years ago and now I wanted to try version 9. I immediately came across a weird behaviour: running yarn start thejQuery(document).ready()function is called before CSS is applied to page.

To confirm the issue I tried to move my CSS from my scss file to the actual HTML tag. With inline style doc ready behaves correctly.

Now, how can I load CSS before doc ready? Or at least, is there any event that I can listen to in order to run my scripts?

2

Sounds like a Browsersync issue, and also an old one:

Right now I’m working on my theme’s UX as it relates to initial page load, which involves hidden content and transitions that reveal content. It’s not playing nicely with the way the CSS is getting injected via JS because of how the page first starts with no CSS, and initial styling of elements is affected as a result, which interferes with my JS revealing code. I’m trying to test this as closely from the point of view of a member of the public as possible, from the initial page load, so I’m deliberately bypassing BrowserSync to run these tests (accessing directly via devurl.dev ). But even on devurl.dev the loading of CSS is noticeably delayed and causing problems with the UX; I guess webpack is what injects the CSS?

from

3

I’ve crafted a workaround which works great and can be shipped in production without affecting the normal behaviour…

The concept is to wait the css to be applied and then execute any javascript.

STEP 1

On your resources/views/layouts/app.blade.php add style="opacity: 0" to the body tag this way:

<body @php body_class() @endphp style="opacity: 0">

STEP 2

Place this style on your resources/assets/styles/common/_global.scss:

body {
  opacity: 1 !important;
}

STEP 3

Change your doc ready function in resources/assets/scripts/main.js

// Load Events
jQuery(document).ready(checkStyleIsLoaded);

// Check if style is loaded
function checkStyleIsLoaded() {
  // Get the current opacity of the body tag
  const opacity = window
    .getComputedStyle(document.body)
    .getPropertyValue('opacity');
  // If opacity is 1 (CSS has been loaded!) then run your scripts
  if (opacity === '1') { routes.loadEvents() } 
  // If opacity is 0 then wait for other 100ms
  else { setTimeout(checkStyleIsLoaded, 100); }
}
4

I have found that the missing css was causing layout issues, and scripts that relied on dimensions set by css were fine on production but hit-n-miss on development.

On webpack.config.js I disabled the CleanPlugin when watcher is on, so then I start with yarn build && yarn start.

// remove this from plugins
new CleanPlugin([config.paths.dist], {
    root: config.paths.root,
    verbose: false,
}),

// add this before module.exports
if (!config.enabled.watcher) {
  webpackConfig.plugins.push(new CleanPlugin([config.paths.dist], {
    root: config.paths.root,
    verbose: false,
  }));
}

Unfortunately, depending on your stage of development, after a while you will want to restart the dev server, as initial css will be out of date, but at least you avoid the missing css related errors.

5

This topic was automatically closed after 42 days. New replies are no longer allowed.