jquery how to alert after preloading image

Question

hi i'd like to preload an image using jquery. After the image is preloaded there should be an alert message: "image preloaded"

i tried the following code but it doesn't work:

$("images/test.jpg").load(function(){
  alert("Image loaded.");
});

hope u can help.

Answer 1

Have a look at this plugin for JQuery: http://plugins.jquery.com/imagesloaded/

You can fire off an event just as you propose as long as your selector is scoped correctly:

$('#container').imagesLoaded( function() {
  // images have loaded
});

Answer 2

You will need an id which will contain that image.

$( "#div" ).load( "images/test.jpeg", function() {
alert( "Load was performed." );
});

See the documentation at http://api.jquery.com/load/

Answer 3

Seems you want:

$("img[src='images/test.jpg']").load(function(){
  alert("Image loaded.");
});

Now what about reading the DOC: http://api.jquery.com/load-event/ ???

That's said, be aware of cache behaviour, especially on older browsers.

Answer 4

the following solution worked out for me:

$('<img src="images/test.jpg">').load(function() {
      alert("Image loaded.");
});

i found it here: https://stackoverflow.com/a/10863680/1164027