jQuery .load（）回调

Question

I'm trying to load some content with an AJAX call and AFTER the content is loaded, perform another action. In my example, that latter action is simply an alert but in my real-world example I'm attempting to focus on an input field.

$("#box").load("/favicon.png", function(response) {
     alert('do after the load');
});

https://jsfiddle.net/u0cmmn5h/

As you can see in the fiddle, the alert fires BEFORE the favicon is actually loaded. Isn't the function supposed to fire AFTER the content has been loaded?

Answer 1

Here is an example of using load on an image. Not sure what you have the load on a div.

The load method will be fired when the image src attribute changes and the image is successfully loaded (note if it fails this wont execute).

.load() jQuery

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.

$(function() {
    $('img').load(function() {
    alert('done after load');
  }).attr('src', '/favicon.ico');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="box">
  <img />
</div>

</div>

Answer 2

The callback on .load() executes upon an http response, not when the image is rendered client side.