CODEWITHSUNDEEP
jquerydomloadthisready
Defims
Defims

Reputation: 243

i feel confused with jquery's load

with jquery,how can i do something just after the dom loaded,i write like this: 

<script>
$("#google").load(function() {
  alert('ok');
});
</script>
<img src="http://www.google.com/images/logos/ps_logo2.png" id="google" />

but nothing happen~ if i use ready() instead of load like this:

 <script>
    $("#google").ready(function() {
      alert(this);
      alert('ok');
    });
    </script>
    <img src="http://www.google.com/images/logos/ps_logo2.png" id="google" />

,it will work ,but the pointer "this" will not be $("#google"),and it seems to be "window" or other things,i feel confused~

Upvotes: 1

Views: 144

Answers (5)

Krimo
Krimo

Reputation: 954

If I understood correctly you want to manipulate #google after the DOM is fully loaded. Then what you want to use is actually $(document).ready(function() {//do stuff with #google});

.load() is used to make ajax requests. You should read up on it here

It would also be interesting to know whether #google is dynamically generated or not.

Oh and in your second example, you can't do alert(this). alert() just takes a string as a parameter.

Upvotes: 3

David Hedlund
David Hedlund

Reputation: 129792

In your first code, you're looking a #google element and tells it to notify you when its image is loaded. However, at the time where the javascript is executed (above the element, in the code), there exists no #google element, and so the event listener is not assigned to anything.

Sadly, adding the event listener inside a DOMReady listener won't always solve the problem either. If, for instance, the image is already in browser cache, the #google load event may occur before DOMReady. The safest approach seems to be to attach the listener immediately after the image is created.

<img src="http://www.google.com/images/logos/ps_logo2.png" id="google" />
<script type="text/javascript">

$('#google').load(function() {
   alert('ok');
});

</script>

Working example

If you're not happy with injecting a script block in the middle of your code like that, but want to defer your script to someplace later, you can always listen to $(window).load() instead of $('#google').load(). This is equivalent to <body onload="">, i.e. it will run when all external content has been loaded. So when $(window).load() occurs, you know that your #google image has loaded, but it's not guaranteed to be immediately after it's loaded.

Upvotes: 1

wong2
wong2

Reputation: 35720

You should first bind the event handler to the load event, then set the image's src to actually start the load.

$('#google').bind("load", function() {
    alert('ok');
});
$("#google").attr("src", "http://www.google.com/images/logos/ps_logo2.png");

see this: http://jsfiddle.net/VaLhf/

Upvotes: 0

Gabriel Spiteri
Gabriel Spiteri

Reputation: 4978

Just use the following:

$(document).ready(function() {
   alert("The DOM has loaded");
});

The .load function is used to trigger an ajax call and place the response in the div specified.

Upvotes: 0

Chris Fulstow
Chris Fulstow

Reputation: 41882

Try this instead:

$(function() {
    var that = $("#google");
    alert(that);
});

This code will run when the DOM is fully loaded, as triggered by the $(document) ready() event.

Upvotes: 0

Related Questions