CODEWITHSUNDEEP
javascriptjquery
Chris
Chris

Reputation: 155

jquery .load isn't checking if my element is loaded

I have this code

<script type="text/javascript">
$("#main_photo_display").load(function(){
    alert("loaded");
});
</script>

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

I need it to do something once that div has loaded. Currently it does nothing. When I substitute window for "#main_photo_display" it works. I have googled and I keep coming across .load as how to check if a page element has been loaded.

Upvotes: 5

Views: 19484

Answers (6)

zogby
zogby

Reputation: 482

I have a sort of workaround, and it is sloppy (please comment out if you have notes).

It is useful when you have a javascript out of your control which appends elements to your dom on a page load.

$(function () {

    var counter = 0;

    var intervalId = setInterval(function () {
        $(document).mouseover()
    }, 105);

    var unbind = function () {

        $(document).off('mousemove', '#label');

        $(document).off('mouseover');

        window.clearInterval(intervalId);

    };

    $(document).mouseover(function () {

        $('#label').trigger('mousemove');

        counter++;

        if (jivositecounter > 200) unbind();

    });

    $(document).on('mousemove', '#label', function () {
        console.log(counter);
        ...doing our stuff when #label appears
        unbind();
    });

});

Upvotes: 0

Luke Stevenson
Luke Stevenson

Reputation: 10351

I don't think a DIV fires a loaded event. If there was a blank.gif image within the DIV, you could attach the $.load() function to that.

<div id="main_photo_display">
  ..... Other Content .....
  <img class="loadcheck" src="blank.gif" width="0" height="0" />
</div>

<script type="text/javascript">
$(document).ready(function(){

  $("#main_photo_display img.loadcheck").load(function(){
    alert("loaded");
  });

});
</script>

Upvotes: 1

Jasper
Jasper

Reputation: 76003

The load event is sent to an element when it and all sub-elements have been completely loaded. This event can be sent to any element associated with a URL: images, scripts, frames, iframes, and the window object.

Source: http://api.jquery.com/load-event/

Further down on the same page they state:

It doesn't correctly bubble up the DOM tree

So you can't delegate this event, the event handler must be attached to the element on which the load event fires.

Upvotes: 3

Indranil
Indranil

Reputation: 2471

Or you can run the script after the DOM is ready like so:

<script type="text/javascript">
$(document).ready(function() {
    $("#main_photo_display").load(function(){
        alert("loaded");
    });
});
</script>

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

Sorry I think I read it wrong :) You need this:

<script type="text/javascript">
    $(document).ready(function() {
        alert('loaded');
    });
</script>

Upvotes: 2

jfriend00
jfriend00

Reputation: 708106

A plain div does not have a load event except when you are loading content into it with ajax (which I don't think is what you are doing here). If your code is physically located after the div in your page, then the div will be available and ready for your code to operate on it (you don't have to check anything).

If your code is located before the div in the page, then you can use jQuery's .ready() method to know when it is safe to access the div:

<script type="text/javascript">
    $(document).ready(function() {
        // safe to access $("#main_photo_display") here
    });
</script>

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

Upvotes: 1

lonesomeday
lonesomeday

Reputation: 238095

You can't do that: load events are not fired on just any HTML element, only on those that require loading an external resource.

The best way to ensure the element is loaded is to put the script tag after it in the markup. 

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

<script type="text/javascript">
    alert("loaded");
</script>

The Javascript will not be run before the div is parsed.

Upvotes: 0

Related Questions