defer css and Isotope

  • Resolved redorca

    (@redorca)


    7 years, 1 month ago

    Hello,
    I’ve been using AO for a while now and it’s great.
    Recently I have a problem with my theme and AO. On the start page of my theme the recent blogposts will be placed with the isotope js. But with about 1 out of 10 page loadings, the positioning of the elements is wrong (I could see it mostly in firefox, but also in chrome it already happened). I have tested it on several PCs, some of them always have the bug, others never have it.
    In the Theme-support-forum they told me that it could be because the css is loaded after js. Also some other plugins using (probably) this javascript will fail.
    But I would like to continue using “derfer css”.

    See Screenshot: https://s1.postimg.org/3u2i22i7an/Screenshot-2017-10-16_Krug_Floristik.png
    and what it should look like: https://s1.postimg.org/6zxbat9kyn/Screenshot-2017-10-16_Krug_Floristik-2.png

    Can you help me to fix this?
    Sorry for my bad english.
    Best regards

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

Viewing 6 replies - 1 through 6 (of 6 total)
  • Plugin Author Optimizing Matters

    (@optimizingmatters)

    Not easy, but I see 2 possible solutions there;
    1. extract the styles for the elements that are rendered by the isotope js and add it to your critical CSS
    2. force the isotope js to run (again) after the CSS has loaded (which would require some code). for this to work the theme developers should wrap that JS in a function so we can call easily call it (seems not to be the case now).

    frank

    Thread Starter redorca

    (@redorca)

    Thank you.
    I fixed the problem by adding some more styles to the above-the-fold css manually. But finding them is very time-consuming.
    I asked the theme developer if he would like to include the js in a function.
    Let’s see what comes out of it.

    Thank you once again

    Thread Starter redorca

    (@redorca)

    My theme developer has written:
    “Isotope is a function that you can call and run again after CSS loads assuming you have an event for when CSS loads.”
    Is there such a event?
    Sorry, I’m not a developer.

    Plugin Author Optimizing Matters

    (@optimizingmatters)

    Is there such a event?

    no, but with the most recent in-development version of AO (available on github) we can create one.

    Isotope is a function that you can call and run again after CSS loads

    in wp-content/themes/ascend_premium/assets/js/ascend-main.js I some isotope code, but I don’t see a function to call with that name?

    but maybe the theme developer can join our conversation here, to avoid you having to relay messages between us techies? ??

    Thread Starter redorca

    (@redorca)

    I’ve asked them to join this conversation, but I didn’t get an answer.
    So I’m gonna have to do it manually.

    Plugin Author Optimizing Matters

    (@optimizingmatters)

    OK, can you start by asking the exact JS-code to (re-)arrange the blocks that are rendered by the isotope JS?

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘defer css and Isotope’ is closed to new replies.