Question 241072 in Wordpress Question posted in
The official Wordpress documentation can be found here.

WordPress – How to block a HTML page from rendering until a JS script is complete

I have built a website using a website builder with a CMS similar to WordPress. I want to run a script before the page renders to see if I need to redirect a user to another page.

Currently, I have a JS script attached in the head tag, and the logic works fine when the conditions are met. However, sometimes the initial page may render for less than a second before it redirects to the updated path.

How can I avoid this page from rendering for this small timeframe? I can’t seem to find a way to do so. I tried to see if I could remove the whole body from the DOM and add it back once the function has run, but I wasn’t able to implement this successfully.

Tags:

2

Answers


  1. 0

    There’s a couple things you can do, the first one is using DOMContentLoaded which seems to be the most efficient:

    document.addEventListener('DOMContentLoaded', function() {
    // Your redirect logic
    if (someCondition) {
        window.location.href = 'https://www.example.com/new-location';
    }
});

    This will wait for the document to be ready and then you can decide if you want to show content or redirect from in here.

    If the above doesn’t suit your needs, you can also use CSS to display the page as none then implement your redirect:

    <head>
   <style>
       body {
           display: none;
       }
   </style>
   <script>
       // Your redirect logic
       if (someCondition) {
           window.location.href = 'https://www.example.com/new-location';
       } else {
           document.body.style.display = 'block';
       }
   </script>
</head>

    This will never show the page body to users unless your condition is false. Hope this helps!

    Login or Signup to reply.
  2. 0

    this may work for you :

    document.addEventListener('DOMContentLoaded', function() {
   // your code here
}, false);
or if your comfort with jquery,

$(document).ready(function(){
    // your code
});

    some for jQuery

    $(document).ready(function() {   //same as: $(function() { 
    // your code
});

$(window).load(function() {
    // your code
});
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search