Is there an event for when the content of a HTML element has fully loaded?

Question

I have a <div> containing a number of images. I want to fade this <div> in after all contained images have loaded, as they make up one unit that I'd rather have display cleanly instead of momentarily all over the place (while loading).

Is there something similar to window.onLoad that I can apply to a certain element?

e.g.

$("#id").onLoad(function()
{
    $(this).fadeIn(500);

});

Not quite an exact duplicate, but check this out—the top answer is relevant, if correct: http://stackoverflow.com/questions/5424055/check-if-images-are-loaded — Jordan Gray, Feb 07 '12 at 23:45

score 2 · Accepted Answer · answered Feb 07 '12 at 23:17

2

var images = $("#id img");
var imgCount = images.size();
var i = 0; 
images.load(function() {
    if(++i == imgCount){
         $("#id").fadeIn(500);
    }
});

answered Feb 07 '12 at 23:17

driangle

11,601
5
47
54

Note, this answer indicates that it is sufficient to call the `load` event on the `div`; see http://stackoverflow.com/questions/5424055/check-if-images-are-loaded :) – Jordan Gray Feb 07 '12 at 23:43

score 1 · Answer 2 · answered Feb 07 '12 at 23:24

one way of doing it is to add this in the head section of the HTML document:

$(function() {
    $("#id").fadeIn(500);
});

the idea behind $(function() { /* code */ } ) is that it will be ran when the DOM is loaded, you can have as many of this as you want in your head section, but it would be more readable IMHO if you only have one.

Another way of doing it is to have a main javascript file that will be ran for each page when it's ready, let's call the HTML file index.html and the javascript file index.js

index.html

<!doctype html>
<head>
<!- include the javascript/css/etc. files -->
  <script type="text/javascript" language="javascript">
    $(function() {
      // the following function exists in index.js file
      onPageLoadedIndex();
    });

    $(function() {
      // this code will also be executed when the DOM is ready
      // however I strongly recommend having only one of these
    });
  </script>
</head>
<body>
<!-- snip -->
</body>
</html>

index.js

function onPageLoadedIndex() {
  // some code
  $("#id").fadeIn(500);
  // more code
}

In this way you'll be avoiding having too much javascript in the HTML page

But you're describing document ready handlers, which are executed when the DOM is "ready" for access from script in that it has been fully parsed, but _before_ all element content has loaded. The OP wants to do the fade in after all applicable images have _loaded_. By the way, regarding your technique of moving the function into an external file, you can move the `$()` part into the external file too so that the main file doesn't need to know the name of the function... — nnnnnn, Feb 07 '12 at 23:51

shaunsantacruz · Answer 3 · 2012-02-08T00:18:13.643

0

You probably already know how to assign a function to run on page load. In case you don't, try:

window.onload = function() {
    $('div').fadeIn(500);
}

jQuery only solution:

    $('div img.class').load(function() {
    // img.class is your largest (in bytes) image.
        $('div').fadeIn(500);
    });

edited Feb 08 '12 at 00:18

answered Feb 07 '12 at 23:43

shaunsantacruz

8,903
3
19
19

1

The jQuery only solution needs to be `$('div').load(...);` otherwise it'll run when the individual images load and fade in too soon. – nnnnnn Feb 08 '12 at 00:03
Great observation. I tested it using `$('div').load(...);`, but it didn't work for me. What ended up working is adding a class to the largest (in bytes) image. – shaunsantacruz Feb 08 '12 at 00:20

MCSI · Answer 4 · 2012-02-07T23:53:39.030

-1

try this:

$("#id").load(function()
{
    $(this).fadeIn(500);

});

good luck

edited Feb 07 '12 at 23:53

answered Feb 07 '12 at 23:26

MCSI

2,818
26
35

This won't work. As far as I'm aware you can only use `.ready()` with the `document`, but in any case the whole point of `.ready()` is that it is fired _before_ everything finishes loading and OP wants to do something _after_ the images load... – nnnnnn Feb 07 '12 at 23:47

Is there an event for when the content of a HTML element has fully loaded?

4 Answers4