Do you have any idea of ​​loading Ajax images for use with jQuery?

Question

I have a page loaded by jQuery. The bootstrap includes 100 entries with 6 icons per entry. Needless to say, loading takes a few seconds, and I want to give the user a prompt / animation for the download.

Any ideas?

Answer 1

http://www.ajaxload.info/ is a great resource for creating animated GIFs for this kind of thing.

After you get the animation, make it part of the page; start the jQuery loading mechanism in the onload () animation event (so you are sure that the animation is loaded first), and use the callback at the end of the loading sequence to disable / hide the animated GIF.

Answer 2

Matt Berset is a good way to do this based on jQuery.

Answer 3

Another resource for downloading images: http://www.loadinfo.net/

Answer 4

You can display a div with an animated GIF as a download prompt. This is how I did it in the past.

Answer 5

Anytime I need something like this, I replace the element that will be loaded with a simple, centered, animated gif that says “Loading, please wait” or a similar message. If it is only a few seconds, a progress indicator is likely to be redundant, but a simple animation gives most people the confidence that yes, your site is still working.

Answer 6

You can configure the global ajax event to show / hide the download icon. Take a look at: http://docs.jquery.com/Ajax_Events

Answer 7

You can do the animation in CCS3, for example, if you need momentum:

HTML markup:

<div class="pulse"></div> 

css:

 .pulse { width: 32px; height: 32px; margin: 25% auto; background-color: #303030; -webkit-border-radius: 16px; -moz-border-radius: 16px; -ms-border-radius: 16px; -o-border-radius: 16px; border-radius: 16px; -webkit-animation: scaleout 1.0s infinite ease-in-out; animation: scaleout 1.0s infinite ease-in-out; } @-webkit-keyframes scaleout{ 0%{ -webkit-transform:scale(0) } 100%{ -webkit-transform:scale(1); opacity:0 } } @-moz-keyframes scaleout{ 0%{ -moz-transform:scale(0) } 100%{ -moz-transform:scale(1); opacity:0 } } @-ms-keyframes scaleout{ 0%{ -ms-transform:scale(0) } 100%{ -ms-transform:scale(1); opacity:0 } } @-o-keyframes scaleout{ 0%{ -o-transform:scale(0) } 100%{ -o-transform:scale(1); opacity:0 } } @keyframes scaleout{ 0%{ transform:scale(0); -webkit-transform:scale(0) } 100%{ transform:scale(1); -webkit-transform:scale(1); opacity:0 } } 

Or you can create a div with an internal image or background image, you have some ideas for animation here, it has a downloadable set for free, enjoy.