CODEWITHSUNDEEP
javascriptjquery
Marty
Marty

Reputation: 39456

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

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);

});

Upvotes: 0

Views: 1284

Answers (4)

shaunsantacruz
shaunsantacruz

Reputation: 8930

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);
    });

Upvotes: 0

MCSI
MCSI

Reputation: 2894

try this:

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

});

good luck

Upvotes: -1

user497849
user497849

Reputation:

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

Upvotes: 1

driangle
driangle

Reputation: 11779

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

Upvotes: 2

Related Questions