Deferring JS causes layout issues

  • Resolved rudolfl

    (@rudolfl)


    8 months, 3 weeks ago

    https://www.hatsfromoz.com.au/green-and-cream-racing-fascinator-by-fillies-collection/

    Load the page in new incognito window. You will see product images are not quite right. Refreshing the page will get it right, but this is because browser now has its own cashed version.

    Problem was traced down to deferring javascript. If this functionality is disabled, page loads normally.

    This is pretty much is down to how WooCommerce coded. Far from ideal. It loads products images very inefficiently. Images are loaded, then JS is run and it modifies the layout.

    The only way to load the page properly is to exclude

    jquery.min.js
    woo-product-images

    from the JS deferral. But this, in term, really slows down the page. (have to do jquery as woo-product-images depends on it).

    So, the question is — why deferring the javascript is not showing page correctly? I would expect wrong layout displayed until page finishes loading, then layout should be fixed. After all, same code is run, in same order, just a bit later.

    There are no errors in JS console, so there is no code that runs out of order.

    As this particular behavior is native WooCommerce, perhaps you already have the solution and can share?

    Any ideas will be greatly appreciated

    The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)
  • Thread Starter rudolfl

    (@rudolfl)

    After some research, it appears that jQuery itself can not be deferred.

    One issue (not my case) is that some inline code may try to use jQuery before it loads

    Another source is reporting that deferring jQuery may miss the call when page is fully loaded. In this case, whole jQuery framework will not run.

    Plugin Support qtwrk

    (@qtwrk)

    yes, I remember we have JQ , by default, excluded from optm , no ?

    Thread Starter rudolfl

    (@rudolfl)

    You do…

    I always thought that was because of possible inline JS code that depends on it. So I made sure there is none before removing jQuery from exclusions. Well, looks like there is more to why it should be excluded.

    Rudolf

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Deferring JS causes layout issues’ is closed to new replies.