Plugin conflict with a FOUC fix snippet in DIVI

  • Resolved enrique017

    (@enrique017)


    3 years, 4 months ago

    Hello

    I’m using divi to build a ecommerce site. Divi sometimes suffers of FOUC (Flash of unstyled content), but I found a snippet that solved that problem at least for me.

    The snippet is this one:

    <script type="text/javascript">
var elm=document.getElementsByTagName("html")[0];
elm.style.display="none";
document.addEventListener("DOMContentLoaded",function(event) {elm.style.display="block"; });
</script>

    For some reason it brakes the plugin. The carousel does not work when that snippet is on.

    I would like to know if theres is something I can do to fix or why does that happen.

    Thanks.

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

Viewing 2 replies - 1 through 2 (of 2 total)
  • Plugin Author Dan Zakirov

    (@alexodiy)

    Your script is weird. Why do display none on html? Let’s take your code apart…

    var elm=document.getElementsByTagName("html")[0]; // here you declare a variable for the html tag
elm.style.display="none"; // here you hide the html tag with style when the page loads
document.addEventListener("DOMContentLoaded",function(event) {
elm.style.display="block"; // after the page loads, you make the html display block again
});

    Why can’t the plugin initialize the carousel?

    The thing is, our plugin also uses JS and initializes the carousel when the page loads. Since you’re hiding html(elm.style.display=”none”), the carousel script can’t work on the invisible element.

    I don’t know why you need this script, in your case there could be 2 solutions

    1. Try checking the “initializing JS after loading the whole page” box in the plugin’s settings – you can find this option in the plugin’s settings. Maybe this will help, because your script is higher on the DOM tree with respect to initializing the carousel plugin.

    2. Try using your script without the line elm.style.display=”none”; i.e. like this:

    var elm=document.getElementsByTagName("html")[0]; 
// elm.style.display="none";
document.addEventListener("DOMContentLoaded",function(event) {
elm.style.display="block";
});

    Try these 2 items first, then we’ll see what else we can do.

    Thread Starter enrique017

    (@enrique017)

    Thanks for your reply.

    Yeah, I got the code from a blog post about how to fix Divi’s FOUC. I tried it and it solved my needs as everything was fine but the carousel. I’m no expert, so appreciate your help clarifying everything.

    The first solution worked very well. The carousel is working now, thanks!

    Thanks for the help.

    Best regards.

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Plugin conflict with a FOUC fix snippet in DIVI’ is closed to new replies.