execute JavaScript function once every script on the webpage has been completely loaded

Question

execute JavaScript function once every script on the webpage has been completely loaded

I want to execute a basic javascript function once my webpage has fully loaded. Here's an example of the function:

<script type="text/javascript">
function changeSize() {
  var el = document.getElementById("my-id");
  el.style.height = "500px";
};
</script>

My webpage contains a lengthy (takes seconds) script fetched from an external URL that generates the main content within the html body.

I am utilizing Bootstrap and the body section in my base.html looks like this:

<body>

  <div class="container-fluid">
    {% block header %}{% endblock %}

    {% block content %}{% endblock %}

    {% block footer %}{% endblock %}

  </div>

  <!-- jQuery first, then Popper.js, then Bootstrap JS -->
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</body>

The content block is imported from an external html file as shown below:

{% extends 'base.html' %}

{% block header %}
{% include 'header.html' %}
{% endblock %}

{% block content %}
  <div class="my-class" id="my-id">
        {{ myapp | safe }}
  </div>
{% endblock %}

{% block footer %}
{% include 'footer.html' %}
{% endblock %}

Within the 'my-id' element, myapp is populated by the long-loading js script which, upon completion, displays all page content. The external URL path for myapp is defined and retrieved via a python script using Flask.

I have attempted window.onload = changeSize;,

<body onload="changeSize();">

, and monitored the timing of all stages in document.readyState.

All these methods trigger my js function after the html has fully loaded, but before the external script for myapp finishes. How can I detect when all elements and scripts have completely finished loading?

javascript html jquery css jinja2

Answer 1

Answer №1

After experimenting with different approaches, I finally found a solution involving a delay method that was inspired by an answer on Stack Overflow (referenced here).

To implement this solution, create a new file named custom.js and add the following code:

function delay() {
    setTimeout(function() {
        changeSize();
    }, 200);
}

if (document.readyState == 'complete') {
    delay();
} else {
    document.onreadystatechange = function () {
        if (document.readyState === "complete") {
            delay();
        }
    }
}

Next, include the custom.js file in your base.html using the following script tag:

<script type="text/javascript" src="{{ url_for('static', filename='custom.js') }}"></script>

This implementation effectively waits for the lengthy loading process to complete before triggering the changeSize() function.

Answer 2

After experimenting with different approaches, I finally found a solution involving a delay method that was inspired by an answer on Stack Overflow (referenced here).

To implement this solution, create a new file named custom.js and add the following code:

function delay() {
    setTimeout(function() {
        changeSize();
    }, 200);
}

if (document.readyState == 'complete') {
    delay();
} else {
    document.onreadystatechange = function () {
        if (document.readyState === "complete") {
            delay();
        }
    }
}

Next, include the custom.js file in your base.html using the following script tag:

<script type="text/javascript" src="{{ url_for('static', filename='custom.js') }}"></script>

This implementation effectively waits for the lengthy loading process to complete before triggering the changeSize() function.

Answer 3

Answer №2

I'm uncertain about the process of loading external scripts. If they are loaded using a special library, it may be necessary to wait for a callback before initializing your App.

Alternatively, you might consider utilizing the DOMContentLoaded event. This could potentially provide a solution, if my understanding is correct.

document.addEventListener("DOMContentLoaded", function(event) {
  console.log("DOM fully loaded and parsed");
});

Answer 4

I'm uncertain about the process of loading external scripts. If they are loaded using a special library, it may be necessary to wait for a callback before initializing your App.

Alternatively, you might consider utilizing the DOMContentLoaded event. This could potentially provide a solution, if my understanding is correct.

document.addEventListener("DOMContentLoaded", function(event) {
  console.log("DOM fully loaded and parsed");
});

execute JavaScript function once every script on the webpage has been completely loaded

Answer №1

Answer №2

Similar questions

The route does not support the POST method

jQuery's conditional always evaluates the first condition

Guide on making a half circle within a container or a button aligned with text

Graphql query using $http.post is unsuccessful

Establishing a connection between the socket and the currently authenticated user through socket.io

I have been attempting to extract real estate listings from an MLS website using Beautiful Soup and have found some success. I am now considering if using Selenium would be a more efficient option

The component's width appears to be constrained by the use of display flex

Problem arising from apostrophe usage in Javascript OData request

The animated image gracefully glides down the webpage accompanied by an h3

Can the appearance of jqgrid be personalized to suit individual preferences?

What is the best way to postpone one of the 3 ajax requests?

"Trouble with Ajax success handler - it's not functioning properly

query the database to retrieve information from a dropdown menu that shows connected services using the CodeIgniter framework

Tips for creating a full-screen first page while keeping the others standard

Eliminating redundant files in the upload section

Tips for extracting text from a specific div using jQuery

displaying an image that has been uploaded inside a div element

How can you display an HTML page retrieved through an API request in various ways?

Add up the duplicate elements in two arrays

What is the most efficient way to select all checkboxes with jQuery?