How to add onload event to a div element

Question

How do you add an onload event to an element?

Can I use:

<div onload="oQuickReply.swap();" ></div>

for this?

There is a [more relevant answer now](https://stackoverflow.com/questions/58837574/is-there-an-equivalent-of-onload-or-a-hypothetical-onparse-for-standard-html) - perhaps you can revise the accept? — mplungjan, Nov 13 '19 at 21:41

DanMan · Accepted Answer · 2014-08-16T11:45:39.777

286

No, you can't. The easiest way to make it work would be to put the function call directly after the element

Example:

...
<div id="somid">Some content</div>
<script type="text/javascript">
   oQuickReply.swap('somid');
</script>
...

or - even better - just in front of </body>:

...
<script type="text/javascript">
   oQuickReply.swap('somid');
</script>
</body>

...so it doesn't block the following content from loading.

edited Aug 16 '14 at 11:45

answered Oct 30 '10 at 14:30

DanMan

11,323
4
40
61

4

Depending on the usage it is not better to put it in front of `
`. f.e. if you want to hide the `
` only if javascript is enabled but avoid "flashing". The visibility time depends on how long the browser needs to load/parse all inline/external scripts.
– mgutt Jul 24 '13 at 10:24
Is this an anti-pattern, in that it's better to keep all js inside its own file? Is there a way to selectively run js when certain elements are loaded into the document? – Ryan Walton Dec 17 '15 at 20:51
1

It's not an anti-pattern, but you usually wait for the DOM to be loaded and then do all the JS stuff. – DanMan Dec 17 '15 at 22:57
4

Throw this link out here for anyone that comes across this answer https://www.w3schools.com/tags/ev_onload.asp - All the HTML elements that currently support `onload` – Brandon Benefield Mar 13 '18 at 18:39
1

This answer is no longer relevant. Here is a [new one](https://stackoverflow.com/questions/4057236/how-to-add-onload-event-to-a-div-element/58838457#58838457) – mplungjan Nov 13 '19 at 21:42

score 102 · Answer 2 · answered Jan 16 '17 at 21:10

102

You can trigger some js automatically on an IMG element using onerror, and no src.

<img src onerror='alert()'>

answered Jan 16 '17 at 21:10

C B

12,482
5
36
48

12

Brilliant! Can be used to trigger typescript from angular as well: img src (error)="function()" /> – Brian Richardson May 26 '17 at 20:29
1

This a fantastic approach. Please see my expansion of your solution here: https://stackoverflow.com/questions/4057236/how-to-add-onload-event-to-a-div-element/55106785#58838457 – Rounin Nov 13 '19 at 16:43
1

Caniuse?͏͏͏͏͏͏͏ – Pacerier Jun 11 '20 at 06:29
6

This is a dirty workaround... But hey if it fits... – Enrico Sep 29 '20 at 08:20
Excellent! Thank you! – voodoo98 Jan 28 '22 at 17:03

score 88 · Answer 3 · edited Mar 01 '14 at 15:21

88

The onload event can only be used on the document(body) itself, frames, images, and scripts. In other words, it can be attached to only body and/or each external resource. The div is not an external resource and it's loaded as part of the body, so the onload event doesn't apply there.

edited Mar 01 '14 at 15:21

Morten Kristensen

7,412
4
32
52

answered Oct 30 '10 at 04:30

kijin

8,702
2
26
32

21

Not only in body element, you can use it as well with image and iframe for example, among others. http://www.w3schools.com/jsref/event_onload.asp – Joe Sep 26 '14 at 09:14
3

It is worth noting that inline scripts are NOT external resources, and so `onload` doesn't work on any ` – gog Apr 04 '18 at 08:36

score 49 · Answer 4 · answered Dec 16 '16 at 02:51

49

onload event it only supports with few tags like listed below.

<body>, <frame>, <iframe>, <img>, <input type="image">, <link>, <script>, <style>

Here the reference for onload event

answered Dec 16 '16 at 02:51

Samda

1,439
12
5

Kuofp · Answer 5 · 2016-03-09T05:04:30.707

20

Try this! And never use trigger twice on div!

You can define function to call before the div tag.

$(function(){
    $('div[onload]').trigger('onload');
});

DEMO: jsfiddle

edited Mar 09 '16 at 05:04

answered Mar 05 '16 at 02:14

Kuofp

384
3
7

Above jsfiddle doesn't have a jQuery loader - and doesn't work. – Arif Burhan Mar 06 '16 at 13:13
@Arif Burhan I don't get it. I do load JQuery(edge). Could you check again? I can see "Hello World" even using mobile. – Kuofp Mar 06 '16 at 13:45
@Kuofp That fiddle doesn't actually have handlers get called when their target elements are loaded. It just uses jquery to search for elements that have an attribute (in your case `onload`) and then calls those functions. The script works even if you change the attribute to something other than `onload` e.g. https://jsfiddle.net/mrszgbxh/ – Trindaz Aug 16 '16 at 01:06
1

@Trindaz Exactly! To put it another way, the scripts act like onload event. Thanks for leaving a comment! – Kuofp Aug 17 '16 at 03:06

score 10 · Answer 6 · answered Oct 17 '12 at 10:03

10

I just want to add here that if any one want to call a function on load event of div & you don't want to use jQuery(due to conflict as in my case) then simply call a function after all the html code or any other code you have written including the function code and simply call a function .

/* All Other Code*/
-----
------
/* ----At the end ---- */
<script type="text/javascript">
   function_name();
</script>

OR

/* All Other Code*/
-----
------
/* ----At the end ---- */
<script type="text/javascript">
 function my_func(){
   function definition;      

  }

 my_func();
</script>

answered Oct 17 '12 at 10:03

dev_khan

709
7
16

Can you add more than one function this way? i.e. at the end of the html document just before the
tag? If yes, does the order in which they're written matter?
– Neo Oct 10 '17 at 09:34
Yes you can add more than one function and the order won't matter its just plain (vanilla) javascript. – dev_khan Jan 05 '18 at 07:09

Floyd Kosch · Answer 7 · 2017-07-15T18:37:00.917

I needed to have some initialization code run after a chunk of html (template instance) was inserted, and of course I didn't have access to the code that manipulates the template and modifies the DOM. The same idea holds for any partial modification of the DOM by insertion of an html element, usually a <div>.

Some time ago, I did a hack with the onload event of a nearly invisible <img> contained in a <div>, but discovered that a scoped, empty style will also do:

<div .... >
<style scoped="scoped" onload="dosomethingto(this.parentElement);" >   </style>
.....
</div>

Update(Jul 15 2017) - The <style> onload is not supported in last version of IE. Edge does support it, but some users see this as a different browser and stick with IE. The <img> element seems to work better across all browsers.

<div...>
<img onLoad="dosomthing(this.parentElement);" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" />
...
</div>

To minimize the visual impact and resource usage of the image, use an inline src that keeps it small and transparent.

One comment I feel I need to make about using a <script>is how much harder it is to determine which <div> the script is near, especially in templating where you can't have an identical id in each instance that the template generates. I thought the answer might be document.currentScript, but this is not universally supported. A <script> element cannot determine its own DOM location reliably; a reference to 'this' points to the main window, and is of no help.

I believe it is necessary to settle for using an <img> element, despite being goofy. This might be a hole in the DOM/javascript framework that could use plugging.

GorvGoyl · Answer 8 · 2022-02-26T14:12:09.730

Avoid using any interval-based methods (as they are not performant and accurate) and use MutationObserver targeting a parent div of dynamically loaded div for better efficiency.

Update: Here's a handy function I wrote. Use it like this:

onElementLoaded("div.some_class").then(()=>{}).catch(()=>{});

/**
 *
 * Wait for an HTML element to be loaded like `div`, `span`, `img`, etc.
 * ex: `onElementLoaded("div.some_class").then(()=>{}).catch(()=>{})`
 * @param {*} elementToObserve wait for this element to load
 * @param {*} parentStaticElement (optional) if parent element is not passed then `document` is used
 * @return {*} Promise - return promise when `elementToObserve` is loaded
 */
function onElementLoaded(elementToObserve, parentStaticElement) {
  const promise = new Promise((resolve, reject) => {
    try {
      if (document.querySelector(elementToObserve)) {
        console.log(`element already present: ${elementToObserve}`);
        resolve(true);
        return;
      }
      const parentElement = parentStaticElement
        ? document.querySelector(parentStaticElement)
        : document;

      const observer = new MutationObserver((mutationList, obsrvr) => {
        const divToCheck = document.querySelector(elementToObserve);

        if (divToCheck) {
          console.log(`element loaded: ${elementToObserve}`);
          obsrvr.disconnect(); // stop observing
          resolve(true);
        }
      });

      // start observing for dynamic div
      observer.observe(parentElement, {
        childList: true,
        subtree: true,
      });
    } catch (e) {
      console.log(e);
      reject(Error("some issue... promise rejected"));
    }
  });
  return promise;
}

Implementation details:

HTML:

<div class="parent-static-div">
  <div class="dynamic-loaded-div">
    this div is loaded after DOM ready event
  </div>
</div>

JS:

var observer = new MutationObserver(function (mutationList, obsrvr) {
  var div_to_check = document.querySelector(".dynamic-loaded-div"); //get div by class
  // var div_to_check = document.getElementById('div-id'); //get div by id

  console.log("checking for div...");
  if (div_to_check) {
    console.log("div is loaded now"); // DO YOUR STUFF!
    obsrvr.disconnect(); // stop observing
    return;
  }
});

var parentElement = document.querySelector("parent-static-div"); // use parent div which is already present in DOM to maximise efficiency
// var parentElement = document // if not sure about parent div then just use whole 'document'

// start observing for dynamic div
observer.observe(parentElement, {
  // for properties details: https://developer.mozilla.org/en-US/docs/Web/API/MutationObserverInit
  childList: true,
  subtree: true,
});

@GorvGoyal That is awesome. But I have a scenario: we may have multiple images in div and image loading time could differ. The main thing is this I want to call a function when div content is fully loaded. same as window.onload — Ankit Pandey, Nov 04 '21 at 18:40
if you have a div that's shows a loading bar indicating images are being loaded, then you can check for this div instead. — GorvGoyl, Nov 05 '21 at 11:17

Rounin · Answer 9 · 2019-11-14T11:00:38.333

In November 2019, I am seeking a way to create a (hypothetical) onparse EventListener for <elements> which don't take onload.

The (hypothetical) onparse EventListener must be able to listen for when an element is parsed.

Third Attempt (and Definitive Solution)

I was pretty happy with the Second Attempt below, but it just struck me that I can make the code shorter and simpler, by creating a tailor-made event:

let parseEvent = new Event('parse');

This is the best solution yet.

The example below:

Creates a tailor-made parse Event
Declares a function (which can be run at window.onload or any time) which:
- Finds any elements in the document which include the attribute data-onparse
- Attaches the parse EventListener to each of those elements
- Dispatches the parse Event to each of those elements to execute the Callback

Working Example:

// Create (homemade) parse event
let parseEvent = new Event('parse');

// Create Initialising Function which can be run at any time
const initialiseParseableElements = () => {

  // Get all the elements which need to respond to an onparse event
  let elementsWithParseEventListener = document.querySelectorAll('[data-onparse]');
  
  // Attach Event Listeners and Dispatch Events
  elementsWithParseEventListener.forEach((elementWithParseEventListener) => {

    elementWithParseEventListener.addEventListener('parse', updateParseEventTarget, false);
    elementWithParseEventListener.dataset.onparsed = elementWithParseEventListener.dataset.onparse;
    elementWithParseEventListener.removeAttribute('data-onparse');
    elementWithParseEventListener.dispatchEvent(parseEvent);
  });
}

// Callback function for the Parse Event Listener
const updateParseEventTarget = (e) => {
  
  switch (e.target.dataset.onparsed) {

    case ('update-1') : e.target.textContent = 'My First Updated Heading'; break;
    case ('update-2') : e.target.textContent = 'My Second Updated Heading'; break;
    case ('update-3') : e.target.textContent = 'My Third Updated Heading'; break;
    case ('run-oQuickReply.swap()') : e.target.innerHTML = 'This <code>&lt;div&gt;</code> is now loaded and the function <code>oQuickReply.swap()</code> will run...'; break;
  }
}

// Run Initialising Function
initialiseParseableElements();

let dynamicHeading = document.createElement('h3');
dynamicHeading.textContent = 'Heading Text';
dynamicHeading.dataset.onparse = 'update-3';

setTimeout(() => {

  // Add new element to page after time delay
  document.body.appendChild(dynamicHeading);

  // Re-run Initialising Function
  initialiseParseableElements();

}, 3000);

div {
  width: 300px;
  height: 40px;
  padding: 12px;
  border: 1px solid rgb(191, 191, 191);
}

h3 {
position: absolute;
top: 0;
right: 0;
}

<h2 data-onparse="update-1">My Heading</h2>
<h2 data-onparse="update-2">My Heading</h2>
<div data-onparse="run-oQuickReply.swap()">
This div hasn't yet loaded and nothing will happen.
</div>

Second Attempt

The First Attempt below (based on @JohnWilliams' brilliant Empty Image Hack) used a hardcoded <img /> and worked.

I thought it ought to be possible to remove the hardcoded <img /> entirely and only dynamically insert it after detecting, in an element which needed to fire an onparse event, an attribute like:

data-onparse="run-oQuickReply.swap()"

It turns out, this works very well indeed.

The example below:

Finds any elements in the document which include the attribute data-onparse
Dynamically generates an <img src /> and appends it to the document, immediately after each of those elements
Fires the onerror EventListener when the rendering engine parses each <img src />
Executes the Callback and removes that dynamically generated <img src /> from the document

Working Example:

// Get all the elements which need to respond to an onparse event
let elementsWithParseEventListener = document.querySelectorAll('[data-onparse]');

// Dynamically create and position an empty <img> after each of those elements 
elementsWithParseEventListener.forEach((elementWithParseEventListener) => {

  let emptyImage = document.createElement('img');
  emptyImage.src = '';
  elementWithParseEventListener.parentNode.insertBefore(emptyImage, elementWithParseEventListener.nextElementSibling);
});

// Get all the empty images
let parseEventTriggers = document.querySelectorAll('img[src=""]');

// Callback function for the EventListener below
const updateParseEventTarget = (e) => {

  let parseEventTarget = e.target.previousElementSibling;
  
  switch (parseEventTarget.dataset.onparse) {

    case ('update-1') : parseEventTarget.textContent = 'My First Updated Heading'; break;
    case ('update-2') : parseEventTarget.textContent = 'My Second Updated Heading'; break;
    case ('run-oQuickReply.swap()') : parseEventTarget.innerHTML = 'This <code>&lt;div&gt;</code> is now loaded and the function <code>oQuickReply.swap()</code> will run...'; break;
  }
  
  // Remove empty image
  e.target.remove();
}

// Add onerror EventListener to all the empty images
parseEventTriggers.forEach((parseEventTrigger) => {
  
  parseEventTrigger.addEventListener('error', updateParseEventTarget, false);
  
});

div {
  width: 300px;
  height: 40px;
  padding: 12px;
  border: 1px solid rgb(191, 191, 191);
}

<h2 data-onparse="update-1">My Heading</h2>
<h2 data-onparse="update-2">My Heading</h2>
<div data-onparse="run-oQuickReply.swap()">
This div hasn't yet loaded and nothing will happen.
</div>

First Attempt

I can build on @JohnWilliams' <img src> hack (on this page, from 2017) - which is, so far, the best approach I have come across.

The example below:

Fires the onerror EventListener when the rendering engine parses <img src />
Executes the Callback and removes the <img src /> from the document

Working Example:

let myHeadingLoadEventTrigger = document.getElementById('my-heading-load-event-trigger');

const updateHeading = (e) => {

  let myHeading = e.target.previousElementSibling;
  
  if (true) { // <= CONDITION HERE
    
    myHeading.textContent = 'My Updated Heading';
  }
  
  // Modern alternative to document.body.removeChild(e.target);
  e.target.remove();
}

myHeadingLoadEventTrigger.addEventListener('error', updateHeading, false);

<h2>My Heading</h2>
<img id="my-heading-load-event-trigger" src />

See: https://stackoverflow.com/questions/58837574/is-there-an-equivalent-of-onload-or-a-hypothetical-onparse-for-standard-html — Rounin, Nov 13 '19 at 15:16
@DavidBradshaw - You'll never believe it, but I think I _have_ actually cracked it. See the **Second Attempt**, at the top of the answer above. — Rounin, Nov 13 '19 at 16:31
@DavidBradshaw - Scratch that. I've come up with a **Third Attempt**. This is the definitive solution. — Rounin, Nov 13 '19 at 17:57
-1 First, an suggestion, use [MutationObserver](https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver) for dom changes. There is no point in running through `initialiseParseableElements` after you do `appendChild`, the element is RIGHT THERE. Everything of that element is directly accessible as soon as you do `appendChild`. Second, the only thing that your 2nd, 3rd attempts demonstrate is grouping supposingly-separated-onload-listeneres-for-each-elements into a `updateParseEventTarget`. What is the purpose? Third, there is one major logical flaw, lemme continue in next comment. — Valen, Aug 15 '20 at 01:02
Third, where do you put your "initializing code", before `
`? inside `document.onload`? both defeated the original purpose. Directly in `
`, sorry, `querySelector` won't pick up anything, in your example, nothing happens until you add the delayed element and MANUALLY invoked the emit event function. In conclusion, it's just an over-engineered yet not useful solution, it does not directly address the original question. It does not provide an apparent or accurate solution — Valen, Aug 15 '20 at 01:10
That's one thing, the major problem of your code is the timing you try to call `querySelector`, too early you would not retrieve any elements, too late it's no longer a "`onload`" event for some elements — Valen, Aug 15 '20 at 18:00
I'm sorry, I'm not getting what you're saying at all, @Valen. I've frequently used the `onparse` solution I developed in the answer above on elements (like `
` etc.) which don't take `onload`. As you can see in the example I've provided above, the solution works very well and I'm very happy with it. Thanks for your interest. — Rounin, Aug 15 '20 at 23:58
@Rounin host me the site/html file you say "working" and I will show you why it isn't — Valen, Aug 16 '20 at 12:49
THE SNIPPET ISN'T ACCURATE AS IT EMBEDS THE CODE IN `document.onload` FOR YOU — Valen, Aug 16 '20 at 20:16
Why don't you try, put a `` between heading 1 and heading 2 and see what happens — Valen, Aug 16 '20 at 20:20
@Rounin you said "you've frequently used the `onparse` solution", is it written in raw HTML or just some embedded code in something like wordpress or wix. Have you actually tried to understand how a page parses accordingly? — Valen, Aug 16 '20 at 20:26
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/219923/discussion-between-valen-and-rounin). — Valen, Aug 16 '20 at 20:30
Reading this back fifteen months later, I wonder if part of your misunderstanding of this approach (which I didn't appreciate 15 months ago) possibly stems from your unfamiliarity with the _Separation of Concerns_ principle. — Rounin, Nov 22 '21 at 22:17

score 7 · Answer 10 · edited Sep 21 '13 at 08:33

we can use MutationObserver to solve the problem in efficient way adding a sample code below

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style>
        #second{
            position: absolute;
            width: 100px;
            height: 100px;
            background-color: #a1a1a1;
        }
    </style>
</head>
<body>
<div id="first"></div>
<script>
    var callthis = function(element){
           element.setAttribute("tabIndex",0);
        element.focus();
        element.onkeydown = handler;
        function handler(){
                alert("called")
        }
    }


    var observer = new WebKitMutationObserver(function(mutations) {
        mutations.forEach(function(mutation) {
            for (var i = 0; i < mutation.addedNodes.length; i++)
            if(mutation.addedNodes[i].id === "second"){
                callthis(mutation.addedNodes[i]);
            }

        })
    });
    observer.observe(document.getElementById("first"), { childList: true });


    var ele = document.createElement('div');
    ele.id = "second"

    document.getElementById("first").appendChild(ele);

</script>

</body>
</html>

Last time I've checked mutation events performed terribly. – DanMan Nov 03 '14 at 22:51 — DanMan, Nov 03 '14 at 22:51

score 6 · Answer 11 · answered Dec 07 '16 at 21:05

use an iframe and hide it iframe works like a body tag

<!DOCTYPE html>
<html>
<body>

<iframe style="display:none" onload="myFunction()" src="http://www.w3schools.com"></iframe>
<p id="demo"></p>

<script>
function myFunction() {
    document.getElementById("demo").innerHTML = "Iframe is loaded.";
}
</script>

</body>
</html>

jo_va · Answer 12 · 2019-03-11T17:03:19.907

Since the onload event is only supported on a few elements, you have to use an alternate method.

You can use a MutationObserver for this:

const trackElement = element => {
  let present = false;
  const checkIfPresent = () => {
    if (document.body.contains(element)) {
      if (!present) {
        console.log('in DOM:', element);
      }
      present = true;
    } else if (present) {
      present = false;
      console.log('Not in DOM');
    }
  };

  const observer = new MutationObserver(checkIfPresent);
  observer.observe(document.body, { childList: true });
  checkIfPresent();

  return observer;
};

const element = document.querySelector('#element');
const add = () => document.body.appendChild(element);
const remove = () => element.remove();

trackElement(element);

<button onclick="add()">Add</button>
<button onclick="remove()">Remove</button>

<div id="element">Element</div>

score 4 · Answer 13 · edited Dec 21 '21 at 09:40

4

This is very simple solution and 100% working. Just load an <img> tag inside the div or at last line of div, if you think you want to execute javascript, after loading all data in div. As <img> tag supports onload event, so you can easily call javascript here like below:

<div>
<img onLoad="alert('Problem Solved');" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" />
</div>

This above image will show only a single Dot(.), which you even cant see normally. Try it.

edited Dec 21 '21 at 09:40

entli

50
8

answered May 20 '21 at 13:49

Real Virtual Technologies

41
4

Just give a backspace before 'img' word. – Real Virtual Technologies May 20 '21 at 13:51
I think it is best answer, and best way in now... – JaeIL Ryu Feb 25 '22 at 03:03

score 3 · Answer 14 · answered Jul 22 '20 at 06:54

3

we can use all these tags with onload

<body>, <frame>, <frameset>, <iframe>, <img>, <input type="image">, <link>, <script> and <style>

eg:

function loadImage() {
    alert("Image is loaded");
}

<img src="https://www.w3schools.com/tags/w3html.gif" onload="loadImage()" width="100" height="132">

answered Jul 22 '20 at 06:54

Balaji

9,657
5
47
47

frame and frameset is deprecated – Steffan Sep 16 '22 at 10:28

score 2 · Answer 15 · answered Oct 30 '10 at 04:36

2

I really like the YUI3 library for this sort of thing.

<div id="mydiv"> ... </div>

<script>
YUI().use('node-base', function(Y) {
  Y.on("available", someFunction, '#mydiv')
})

See: http://developer.yahoo.com/yui/3/event/#onavailable

answered Oct 30 '10 at 04:36

mjhm

16,497
10
44
55

10

That's quite a large blob of JS to dump onto the page for the sake of binding a single `onload`. – user229044 Oct 30 '10 at 04:38
1

@meagar -- Right, though I'm finding it increasingly rare that I do just two or three simple JS things on a page. Worrying about cross browser compatibility also drives me nuts. – mjhm Oct 30 '10 at 05:19

ddlab · Answer 16 · 2019-02-08T09:23:27.357

First to answer your question: No, you can't, not directly like you wanted to do so. May be a bit late to answer, but this is my solution, without jQuery, pure javascript. It was originally written to apply a resize function to textareas after DOM is loaded and on keyup.

Same way you could use it to do something with (all) divs or only one, if specified, like so:

document.addEventListener("DOMContentLoaded", function() {
    var divs = document.querySelectorAll('div'); // all divs
    var mydiv = document.getElementById('myDiv'); // only div#myDiv
    divs.forEach( div => {
        do_something_with_all_divs(div);
    });
    do_something_with_mydiv(mydiv);
});

If you really need to do something with a div, loaded after the DOM is loaded, e.g. after an ajax call, you could use a very helpful hack, which is easy to understand an you'll find it ...working-with-elements-before-the-dom-is-ready.... It says "before the DOM is ready" but it works brillant the same way, after an ajax insertion or js-appendChild-whatever of a div. Here's the code, with some tiny changes to my needs.

css

.loaded { // I use only class loaded instead of a nodename
    animation-name: nodeReady;
    animation-duration: 0.001s;
}

@keyframes nodeReady {  
    from { clip: rect(1px, auto, auto, auto); }
    to { clip: rect(0px, auto, auto, auto); }  
}

javascript

document.addEventListener("animationstart", function(event) {
    var e = event || window.event;
    if (e.animationName == "nodeReady") {
        e.target.classList.remove('loaded');
        do_something_else();
    }
}, false);

subro · Answer 17 · 2017-02-26T06:05:47.267

0

I am learning javascript and jquery and was going through all the answer, i faced same issue when calling javascript function for loading div element. I tried $('<divid>').ready(function(){alert('test'}) and it worked for me. I want to know is this good way to perform onload call on div element in the way i did using jquery selector.

thanks

edited Feb 26 '17 at 06:05

answered Feb 26 '17 at 05:40

subro

104
2
15

score 0 · Answer 18 · answered Oct 19 '17 at 07:03

As all said, you cannot use onLoad event on a DIV instead but it before body tag.

but in case you have one footer file and include it in many pages. it's better to check first if the div you want is on that page displayed, so the code doesn't executed in the pages that doesn't contain that DIV to make it load faster and save some time for your application.

so you will need to give that DIV an ID and do:

var myElem = document.getElementById('myElementId');
if (myElem !== null){ put your code here}

score 0 · Answer 19 · answered Dec 04 '17 at 06:05

I had the same question and was trying to get a Div to load a scroll script, using onload or load. The problem I found was that it would always work before the Div could open, not during or after, so it wouldn't really work.

Then I came up with this as a work around.

<body>

<span onmouseover="window.scrollTo(0, document.body.scrollHeight);" 
onmouseout="window.scrollTo(0, document.body.scrollHeight);">

<div id="">
</div>

<a href="" onclick="window.scrollTo(0, document.body.scrollHeight);">Link to open Div</a>

</span>
</body>

I placed the Div inside a Span and gave the Span two events, a mouseover and a mouseout. Then below that Div, I placed a link to open the Div, and gave that link an event for onclick. All events the exact same, to make the page scroll down to bottom of page. Now when the button to open the Div is clicked, the page will jump down part way, and the Div will open above the button, causing the mouseover and mouseout events to help push the scroll down script. Then any movement of the mouse at that point will push the script one last time.

score 0 · Answer 20 · answered Jul 09 '18 at 16:11

You could use an interval to check for it until it loads like this: https://codepen.io/pager/pen/MBgGGM

let checkonloadDoSomething = setInterval(() => {
  let onloadDoSomething = document.getElementById("onloadDoSomething");
  if (onloadDoSomething) {
    onloadDoSomething.innerHTML="Loaded"
    clearInterval(checkonloadDoSomething);
  } else {`enter code here`
    console.log("Waiting for onloadDoSomething to load");
  }
}, 100);

Kamil Kiełczewski · Answer 21 · 2019-04-14T12:55:28.580

When you load some html from server and insert it into DOM tree you can use DOMSubtreeModified however it is deprecated - so you can use MutationObserver or just detect new content inside loadElement function directly so you will don't need to wait for DOM events

var ignoreFirst=0;
var observer = (new MutationObserver((m, ob)=>
{
  if(ignoreFirst++>0) {
    console.log('Element add on', new Date());
  }
}
)).observe(content, {childList: true, subtree:true });


// simulate element loading
var tmp=1;
function loadElement(name) {  
  setTimeout(()=>{
    console.log(`Element ${name} loaded`)
    content.innerHTML += `<div>My name is ${name}</div>`; 
  },1500*tmp++)
}; 

loadElement('Michael');
loadElement('Madonna');
loadElement('Shakira');

<div id="content"><div>

SkyRar · Answer 22 · 2019-11-17T10:33:27.467

0

You can attach an event listener as below. It will trigger whenever the div having selector #my-id loads completely to DOM.

$(document).on('EventName', '#my-id', function() {
 // do something
});

Inthis case EventName may be 'load' or 'click'

https://api.jquery.com/on/#on-events-selector-data-handler

edited Nov 17 '19 at 10:33

answered Nov 17 '19 at 09:57

SkyRar

1,107
1
20
37

Jordi Reinsma · Answer 23 · 2023-07-19T12:32:33.603

I managed to make a short and efficient solution for this. Only caveat is that you don't have access to the "event" object inside the called function, and the script tag containing "runOnLoadEvents()" should be deferred/called last, after all content is loaded.

<html>

<body>
  <div onload="doSomething(this, 1500)">
    <p>Loading...</p>
  </div>
  <div onload="doSomething(this, 2000)">
    <p>Loading some more...</p>
  </div>
</body>

<script>
  async function doSomething(element, time) {
    // Simulate a slow process with sleep/timeout
    await new Promise((handler) => setTimeout(handler, time));
    element.innerHTML = "<p>Loaded!</p>";
  }

  async function runOnLoadEvents() {
    // Taken from https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/load_event
    const skiplist = "BODY EMBED IFRAME IMG LINK OBJECT SCRIPT STYLE TRACK";
    const elements = document.querySelectorAll("[onload]");
    for (const e of elements) {
      if (skiplist.includes(e.tagName)) {
        continue;
      }
      e.onload();
    }
  }

  runOnLoadEvents();
</script>

</html>

score -1 · Answer 24 · answered Apr 03 '22 at 23:21

Here is a trick that worked for me, you just need to put your div inside a body element

<body>

    <!-- Some code here -->
    
    <body onload="alert('Hello World')">
            <div ></div>
    </body>
    
    <!-- other lines of code -->

</body>

score -2 · Answer 25 · answered Oct 30 '10 at 04:42

-2

Use the body.onload event instead, either via attribute (<body onload="myFn()"> ...) or by binding an event in Javascript. This is extremely common with jQuery:

$(document).ready(function() {
    doSomething($('#myDiv'));
});

answered Oct 30 '10 at 04:42

mway

4,334
3
26
37

1

javascript pure and not jquery, check tag ;) – KingRider Mar 23 '16 at 13:03

score -4 · Answer 26 · edited Jun 25 '17 at 07:33

-4

You cannot add event onload on div, but you can add onkeydown and trigger onkeydown event on document load

$(function ()
{
  $(".ccsdvCotentPS").trigger("onkeydown");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>

<div  onkeydown="setCss( );"> </div>`

edited Jun 25 '17 at 07:33

Abrar Hasin Pranto

25
5

answered May 26 '16 at 17:41

Muhammad Bilal

1,008
13
14

score -4 · Answer 27 · 2018-03-29T03:36:14.817

-4

Try this.

document.getElementById("div").onload = alert("This is a div.");

<div id="div">Hello World</div>

Try this one too. You need to remove . from oQuickReply.swap() to make the function working.

document.getElementById("div").onload = oQuickReplyswap();
function oQuickReplyswap() {
alert("Hello World");
}

<div id="div"></div>

edited Mar 29 '18 at 03:36

answered Mar 29 '18 at 03:23

1

It seems to work, but it is merely, that `alert("This is a div.");` is called when this line is executed and the result (which is `undefined`) is assigned to `div.onload`. Which is completely pointless. – Frederic Leitenberger Jul 18 '19 at 12:34

How to add onload event to a div element

27 Answers27

Third Attempt (and Definitive Solution)

Second Attempt

First Attempt

Linked

Related