CODEWITHSUNDEEP
phpjavascriptjquery
mega-crazy
mega-crazy

Reputation: 858

Jquery delay being overlooked after .html() call

i am trying to introduce an delay after an image is loaded but it keeps skipping the .delay()

$(\"#output\").html(\"<center><img src='http://i.imgur.com/GM6KJdh.gif' /></center>\").delay(5000);

I have tried many versions of the above code but it still dosent work

Appreciate the help guys.

Upvotes: 2

Views: 297

Answers (4)

windler
windler

Reputation: 57

AFAIK the delay() function just delays functions in the queue which follow. So you need to call another function after delay().

Maybe you can try

.delay(5000).finish();

Upvotes: 1

PassKit
PassKit

Reputation: 12591

From the jQuery documentation

The .delay() method is best for delaying between queued jQuery effects. Because it is limited—it doesn't, for example, offer a way to cancel the delay—.delay() is not a replacement for JavaScript's native setTimeout function, which may be more appropriate for certain use cases.

Your image is loading, then the delay is triggering, then... it's up to you what happens next. But since .delay is attached to #output, you can only do something with #output. For example, you could fade it out.

$("#output").html("<center><img src='http://i.imgur.com/GM6KJdh.gif' /></center>").delay(5000).fadeOut();

http://jsfiddle.net/M2GRj/

If you want to have a delay before the image is loaded, then use delay before you set the html.

$("#output").hide().delay(5000).html("<center><img src='http://i.imgur.com/GM6KJdh.gif' /></center>").fadeIn();

http://jsfiddle.net/M2GRj/3/

If you want to induce a pause after the image has loaded and then so something independent, then give your image an ID and call a function with setTimeout on the load event.

$("#output").html("<center><img id='img1' src='http://i.imgur.com/GM6KJdh.gif' /></center>");
// Note: You can only use this after #img1 has been added to the DOM
$('#img1').load(function(){setTimeout('alert("hello")',5000);});

http://jsfiddle.net/M2GRj/5/

Upvotes: 1

Sampath
Sampath

Reputation: 65920

jQuery API Says :

.delay() method allows us to delay the execution of functions that follow it in the queue. It can be used with the standard effects queue or with a custom queue. Only subsequent events in a queue are delayed

As an example check below

When below statement is executed, the element slides up for 300 milliseconds and then pauses for 800 milliseconds before fading in for 400 milliseconds. 

$('#foo').slideUp(300).delay(800).fadeIn(400);

If you don't have any subsequent event after delay then you can use JavaScript's native setTimeout function

How to use setTimeout function ?

setTimeout(function() {
  //your code
}, 2000);  // will work with every browser

For more information check .delay() and setTimeout

Upvotes: 0

nnnnnn
nnnnnn

Reputation: 150070

As explained in the jQuery documentation, .delay() is a jQuery animation method that only delays subsequent animations (on the same element), it doesn't delay non-animation method results, and doesn't "pause" code execution. So any lines of code that you have after the one shown will be executed immediately.

Assuming what you're trying to do is wait two seconds before executing the next line(s) you can do this:

$("#output").html("<center><img src='http://i.imgur.com/GM6KJdh.gif' /></center>");
setTimeout(function() {
   // your other code here
}, 2000);

This uses JavaScript's built-in setTimeout() function to delay execution of any code you put in the function you pass to it.

Upvotes: 1

Related Questions