The premature firing of the fireContentLoadedEvent in Internet Explorer is causing issues

I've encountered a strange issue with IE8 recently. My code has been functioning properly for a while and still works perfectly in Firefox, but all of a sudden Prototype has stopped calling my event listeners for dom:loaded.

I typically attach them using

document.observe("dom:loaded", callback);

After some frustrating debugging (thanks IE debugger!), I've determined that Prototype's fireContentLoadedEvent function (line 4102) is being triggered way before the DOM is fully loaded (almost immediately after the document.write("<script...")).

fireContentLoadedEvent is actually called from the handler for when !document.addEventListener ie (see prototype.js line 4125)

  ...
  if (document.addEventListener) {
  ...
  } else {
    document.write("<script id=__onDOMContentLoaded defer src=//:><\/script>");
    $("__onDOMContentLoaded").onreadystatechange = function() {
      if (this.readyState == "complete") {
        this.onreadystatechange = null;
        fireContentLoadedEvent();
      }
    };
  }
  ...

Can anyone familiar with this process shed some light on why it might be triggering prematurely?

Answer №1

After some investigation, the solution finally clicked!

In Internet Explorer, modifying the innerHTML of an element during page load triggers the premature loading of all "deferred" scripts...

I discovered that one of my inline JavaScript functions was altering the innerHTML of an element during page load. By postponing this action, I was able to resolve the issue.

The key takeaway for me is:

Avoid changing innerHTML until after the page has finished loading!

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Preserve the chosen option in a dropdown menu even after a postback using JavaScript

Seeking Help in Retaining Dropdownlist Selected Value After Postback In my efforts to retain a dropdownlist selected value after postback, I have been exploring various methods. I extract the selected values from the dropdownlist and store them in local ...

I'm trying to set an object value for this select element, and while I have managed to do so, I am struggling to display the title of the selected object. Can anyone help me

I am struggling to display the title of the selected object in this select element. Can anyone help me understand why my code is not showing the title? Here is the code snippet: const [selectedCategory, setSelectedCategory] = useState(""); const categor ...

The scope attribute is not functioning as expected in the loopback model

After utilizing an "include" : "organization" query within the context of my request.json file, a related model, I noticed that the resulting output from the query does not include the intended relation. The structure of the model (request.json file) is ...

Escaping back slashes in Node.js

I am currently encountering an issue with escaping backslashes. Below is the code snippet that I have attempted. The problem lies in how to assign a variable containing an escaped slash to another variable. var s = 'domain\\username'; ...

Is there a way to take a snapshot of an HTML Canvas frame and showcase it on a Bootstrap modal?

I have a page where users must grant permission for their webcam or camera. Once granted, a webmoji will move according to the user's face position. Below is a button that will turn blue and become active once a face is detected. When clicked, I want ...

Iterate through JSON and dynamically populate data

My goal is to dynamically populate content by iterating through JSON data using jQuery. First, an Ajax request is made Then the data is looped through to create HTML tags dynamically A div container with the class "product-wrapper" is created for each J ...

Creating Objects on the Fly with Mistic Query Builder

As someone who is relatively new to JavaScript, I have mainly focused on Java and PHP development. The JavaScript applications I have built in the past have been somewhat messy, difficult to test, and not easily extendable. Currently, I am working on crea ...

changing pictures with jquery

Struggling with this code snippet: $('#clicked_package').css({"background-image" : "url(img/head_2.png)"}).fadeOut("slow"); $('#clicked_package').css({"background-image" : "url(img/head_2_normal.png)"}).fadeIn("slow"); No matter which ...

The iPad Air 2 experiencing issues with rendering on three.js

Recently, I've transitioned to using an iPad Air 2 for work and decided to explore equirectangular panoramas. While these panoramas work perfectly on my desktop, I was excited about utilizing the device orientation features on my iPad/iPhone. However ...

What causes JavaScript image to stop loading while displaying a prompt dialog?

I have nearly finished my project. I will include a codepen link at the end of the post for debugging purposes. What Should Happen? The img element has an id property of dragon, and the image specified in the src attribute should be pre-loaded as the defa ...

React i18next provides a fallback language in case the specified language is not

In my React app, I have implemented i18next for translating files, using the following approach: i18next.js (original) import i18next from 'i18next'; import XHR from 'i18next-xhr-backend'; import detector from 'i18next-browser-lan ...

Tips on adjusting a standard CSS layout with JavaScript and jQuery to generate a unique ID for the updated style

My CSS contains IDs that look like this: <style> .HIDE-DISPLAY-k { background-color: orange; position: fixed; width: 100%; height: 100%; top: 10px; bottom: 0px; left: 10px; right: 0px; overflow: hidden; } #SHOW- ...

Understanding how to sum the values of two separate dropdown selections using jQuery

Is it possible to combine and total up two different selections to display on the "Total" button below? I have added calculations to each selection. When a user selects a quantity, it should automatically sum up and display on the "Total" button, but I am ...

Is there a way to only retrieve the exception message once within the jQuery each function?

Utilizing the "Tempus Dominus Bootstrap 4" for time manipulation has been a crucial part of my workflow. Recently, I encountered a bug while implementing a function to clear all input values upon clicking a specific button. Unfortunately, the clear funct ...

It appears that the collection.add() method in connector/node.js only successfully executes one time

Currently, I am experimenting with MySQL Document Store to compare it with our relational tables. To achieve this comparison, I am working on transforming our existing table into a collection. The table contains approximately 320K records that I need to ...

Struggling to get my chart to render dynamically in vue-chartjs

In my MainChart.vue file, I defined my chart like this: import { Line, mixins } from 'vue-chartjs' const { reactiveProp } = mixins // const brandPrimary = '#20a8d8' export default { extends: Line, mixins: [reactiveProp], props: [& ...

Comparing the efficiency of Jquery draggable with thousands of elements versus updating the elements continuously

Currently, I am developing an application that involves dragging an image using Jquery's draggable utility. The image is accompanied by several overlay divs containing various components positioned based on pixel locations, sometimes reaching into the ...

Steps for Building and Exporting a Next.js Project Without Minification and Optimization

Is there a way to build and export a Next.js project without minifying and optimizing the output files? ...

Verify for a class that does not exist

I am working on a script that updates the content of a div and increments its value by 1 $(function() { $.ajaxSetup({ headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'), }, }); ...

Discover the proper technique to display an error message in cases where no data is detected during the filtering process

I'm currently working on a component that involves search filtering and dropdown filtering. The filtering functionality is working fine, but I'm struggling to determine where to display an error message if no data is found during the filtering pr ...