How to add onload event to a div element

javascript

event-handling

dom-manipulation

performance-optimization

byAnton Shumikhin·Jan 1, 2025

JavaScript's DOMContentLoaded is your foundation for modeling an onload for a <div>. This rad event fires up when the entire HTML document has given everyone their backstage passes.

document.addEventListener('DOMContentLoaded', () => {
    // This is where the magic happens, get your div and drop the beat!
});

Got a taste for jQuery? Use that delicious $(function() {}):

$(function() {
    // Your div is rocking the show here, grab it with $('#yourDivId')
});

Get on stage with '#yourDivId', replacing it with your true <div> celebrity name.

Below the fold: Script tag positioning

A <script> tag runnin' low in the stack (close to the dreaded </body> tag) is like a headliner, it doesn't stop the party from starting. The later it hits the stage, the less time the crowd (browser) waits for the DOM div-vocalist.

Look Ma, no src! Using IMG onerror

Like a sea of glowing phone screens, onload events aren't usually part of the <div> mosh pit. But rock on with an unexpected body surf via <img onerror>:

<div id="loadDiv">
    <img src="nonexistent/image.png" onerror="divLoaded()" style="display:none;">
</div>
<script>
function divLoaded() {
    // The div that fell from heaven, just dropped!
}
</script>

It's the groupie workaround, lighting up the error stage when images fail. Perfect encore!

Runtime Rockstars: Handling dynamic content

When your <div> has its makeup done backstage (at runtime), you've got to bring the performance anxiety down a notch:

function contentAdded() {
    // That's the div hitting the high note!
}

// Prepping the stage with new content
setTimeout(() => {
    document.getElementById('dynamicDiv').innerHTML = '<p>New content</p>';
    contentAdded();
}, 1000);

Center Stage: Efficient function calling

Position your JavaScript code right after the div's performance in the HTML lineup. This allows browsers to hit the code just after a div's grand entrance to the DOM, minimizing that awkward silence (wait times).

<div id="immediateDiv">
    <!-- Div content to rock the house -->
</div>
<script type="text/javascript">
    // The soundcheck's done, time to bring down the house.
</script>

jQuery Event Headliner

Rocking it out with jQuery? Pave the way for an 'onload' event using the .trigger() method:

$('div#triggerDiv').on('customLoad', function() {
    // Your jQuery event just called for an encore!
});
// Crowds going wild? Time to get this custom event on stage
$('div#triggerDiv').trigger('customLoad');

Avoiding brown M&Ms: Compatibility considerations

Remember, save your encore for the ending: use onload for the elements begging for it - <body>, <iframe>, <img>, you name it. A little standard checklist backstage can always prevent a concert catastrophe.

explain-codes / Javascript / How to add onload event to a div element

Linked

Vanilla JavaScript equivalent of jQuery's $.ready() - how to call a function when the page/DOM is ready for it



$(document).ready equivalent without jQuery



How to properly unload/destroy a VIDEO element



Getting the source HTML of the current page from chrome extension



Uncaught TypeError: Cannot read property 'top' of undefined

