How to wait for image to load in jquery

Question

I have this example, when my form is submitted, I need to upload the image file and wait for the image to load until return true (in this case, send the form)

eg.

 $('#myform').submit(function(){ var image=document.createElement('image') var src=document.createAttribute('src') image.value="http://example.com/image.jpg" image.setAttributeNode(src); document.body.appendChild(image); }) 

Here, if I return true form will be sent (the image will not be uploaded), and if false will not (the image will load, but the form will not be sent). How can I create code that will return true after loading the image.

Answer 1

There is an important concept that should be noted here. When you add an event handler function that will be executed when a certain event is triggered, the value that the return event handler function does not actually go anywhere and nothing is passed. Event listeners are created to call event handler functions in an unknown place in the future, but typical script execution is completely linear and occurs in the order of the commands in the script - so it’s best to determine the functionality of your application in such a way that you perform certain actions like this only when certain events occur.

It looks like in your question above, you define one event handler to listen to when the form is submitted at the initial stage, so I will take this as the initial event that will fire everything. Here's how I can describe the feed process you are describing:

 //wrap the form element in jQuery and cache it so we don't work to re-select it var $myform = $('#myform'); //specify that we are listening for -when- the form is submit $myform.on('submit', function(event){ //prevents the form from actually submitting when submit is first clicked event.preventDefault(); //Simpler image construction var image = new Image(); document.body.appendChild(image); //remember to listen for the image load event before assigning a source $(image).on('load', function(){ //this function is invoked in the future, //when the image load event has been fired //this bit actually submits the form via GET or POST $myform.submit(); }); //an image `src` attribute can be set directly via the`src` property image.src = "http://placekitten.com/320/240"; }); 

An example of this work on JSFiddle:

http://jsfiddle.net/Admiral/uweLe/

I would recommend reading the jQuery .on() method to get an idea of ​​the current event binding methods - this should fix the situation a bit.

http://api.jquery.com/on/

Good luck

Answer 2

You can use the onload or jquery load onload on the image and send the form a callback. Then, if you want to wait longer, you can also add a timeout in the callback.

Sort of:

 $('#myform .submitButton').click(function(e){ e.preventDefault(); var image=document.createElement('image'); $(image).load(function(){ //Submits form immediately after image loaded. $('#myForm').submit(); // Submits form 1 second after image has loaded setTimeout(function(){ $('#myForm').submit(); }, 1000); }); var src=document.createAttribute('src'); image.value="http://example.com/image.jpg"; image.setAttributeNode(src); document.body.appendChild(image); }) 

Note. In my example, I changed the submit event to a click event. You can still use submit if you want, it will probably work anyway as long as you return false or use preventDefault .

Answer 3

I am using imagesLoaded PACKAGED v3.1.8

You can find it on github: https://github.com/desandro/imagesloaded

Their official website is: http://imagesloaded.desandro.com/