Jquery loader gif sequential load

What i am trying to do is have an ajax loader gif, that shows while the images then load into the page in sequence.

so it would work like this.

ajax loader show - image fadeIn - ajax loader fadeOut - then move onto next image.

ajax loader show - image fadeIn - ajax loader fadeOut - then move onto next image.

ajax loader show - image fadeIn - ajax loader fadeOut - then move onto next image.

ajax loader show - image fadeIn - ajax loader fadeOut - then move onto next image.

Keep doing that right down the page.

Here is my code.

<ul id="clients"> <li><img src="images/logos/clients_03.jpg" width="242" height="152" alt="Taylor Woodrow" /></li> <li><img src="images/logos/clients_04.jpg" width="242" height="152" alt="BG Group" /></li> <li><img src="images/logos/clients_05.jpg" width="242" height="152" alt="Canon" /></li> <li><img src="images/logos/clients_06.jpg" width="227" height="152" alt="department" /></li> <li><img src="images/logos/clients_08.jpg" width="242" height="164" alt="disney" /></li> <li><img src="images/logos/clients_09.jpg" width="218" height="164" alt="xts" /></li> <li><img src="images/logos/clients_10.jpg" width="223" height="164" alt="fisevr" /></li> <li><img src="images/logos/clients_11.jpg" width="227" height="164" alt="hilti" /></li> </ul> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.js" type="text/javascript"></script> <script> $("ul#clients li").append('<img id="show" src="images/ajax-loader.gif" width="32" height="32" alt="fvdsv" />'); $("ul#clients li:eq(0)").show("fast", function () { /* use callee so don't have to name the function */ $(this).next("ul#clients li").fadeIn("slow", arguments.callee); });

So it kind off works but the ajax loader just shows all the time any help?

Thanks

-------------Problems Reply------------

Well firstly, you have id=show in img and you attach that to all images which is not proper HTML. Ids should be unique.

If you want to show the ajax gif while the image is loading and after it is loaded, show the image and hide the gif, you should use something like this:

  • Add class "images" to the images you want to load first and in it add a style display:none.
  • Then add the ajax gifs straight to the html after these images (or you can do it like you have done in your example).

Use the code:

$('ul#clients li img.images').load(function() {
$(this).next().fadeOut();
$(this).fadeIn();
} );

Category:jquery Views:2 Time:2011-01-18

Related post

  • Sequentially Load DIV using Jquery 2010-07-20

    Is it possible to load a series of DIVS using Jquery using a preloader. For instance, I have a page with 4 divs nested within 1 main div. I'd like to load content1, then content2, and so on. Plus, only 1 div will load at a time in the sequence. Is th

  • jQuery attach function to 'load' event of an element 2009-11-17

    I want to attach a function to a jQuery element that fires whenever the element is added to the page. I've tried the following, but it didn't work: var el = jQuery('<h1>HI HI HI</H1>'); el.one('load', function(e) { window.alert('loaded');

  • jquery fails while page loads with xmlhttprequest 2009-12-01

    how should i apply jquery to php page loaded with xmlhttprequest i have tried it but when php page loads with xmlhttprequest the jquery fails. so what should i do so that jquery may work after page loading. --------------Solutions------------- If you

  • jQuery, do something after loading external files 2010-01-05

    Ok, the point is having a bookmarklet load an external js that creates jquery, jquery-ui and a css file on the current web-page, with everything being done cross-domain. For some reason by the time the jquery code runs, dialog() function which is inc

  • XML not loading with jquery GET but does load with direct link and php? 2010-02-02

    Im attempting to pull in an xml feed that I can load up with php and simpleXML and I can view the direct link, but when I try to use jquery and GET it just times out and I never get a response, the error that comes back is undefined. Here is the code

  • Jquery UI tabs - Custom "Loader" for AJAX tabs 2010-02-04

    I have the following code to generate Jquery UI tabs: <div id="tabs-loading-message" style="display:none">Loading, Please wait..</div> <div id="fragment-2"> <ul> <li><a href="/public/animalstab" title="Animals">

  • Sequentially Load SWFs, on a timer or load next once one is finished. Possible? 2010-02-19

    I have a page that loads loads of swfs*. I'm loading in them all at the same time, Sequentially which is slowing down the intro animation. Is there a way to load swfs sequentially? Or if not load them on a timer (half a sec would do the trick I think

  • jQuery .load() does not load plug-ins 2010-03-04

    I have a main page with 2 links that load external files via .load(). The first file has a simple JavaScript rollover, which works when the content is loaded. The second file has a jQuery plug-in that does not work when loaded via .load() - but works

  • Jquery-UI tabs : Double loading of the default tab 2010-05-07

    I use jqueryui-tabs to display a tabbed UI. here is how my markup looks in a MasterPage: <div id="channel-tabs" class="ui-tabs"> <ul class="ui-tabs-nav"> <li><%=Html.ActionLink("Blogs", "Index", "Blog", new { query = Model.Query,

  • jQuery .load doesn't load swfobject content 2010-07-06

    I'm loading some content (NOT THE HTML headers or anything, just HTML formatted content from a PHP) via jquery .load() into a div. It works, perfectly for everything BUT some Flash-based amCharts (www.amcharts.com) dynamically loaded with amCharts PH

  • JQuery $(document).ready ajax load 2010-07-27

    I looked at quite a few of the related questions and I must be asking this completely different as I saw only a few that seemed to relate. I am loading an entire middle div via JQuery Ajax call and I simply want to be able to do some automatic JQuery

  • I have to disable button when page is loading ,,after full loading page i a have to enable using jquery or javascript how to do? 2010-08-09

    I have to disable button when page is loading ,,after full loading page i a have to enable using jquery or javascript how to do? --------------Solutions------------- Disable any button from the beginning: <input type="button" disabled="disabled" /

  • jquery set height AFTER load 2010-08-16

    I am having a little trouble setting the height of an element that I am loading in dynamically. I use the jquery load function to load an external (dynamic) page into a div (#cbox) on my current page. Because this sub-page is dynamic, I can't know be

  • jQuery: looking for lazy loader plugin for css+js with callback 2010-08-18

    is there a good jquery plugin for lazy loading css+js which also supports callback-when-loaded? i'd like to pass eg. an array of .js and .css files and have a global callback for when anything finished loading. any ideas? thx --------------Solutions-

  • Preloader with JQuery OR Advanced Page Load Behavior with jQuery Progress Bar 2010-08-29

    We have a jQuery Progress Bar. Is there a way we can have the progress bar displaying the loading of an HTML page which has PHP, CSS & JavaScript and all in it? Like a preloader and when the page has been downloaded and rendered fully then displa

  • jquery ui dialogs and loading external content 2010-09-16

    I have a list of pages that are dynamically generated with a echo statment. example: <a href="<?php echo $action['href']; ?>"><span onclick="jQuery('#category_edit_dialog').dialog('open'); return false"><?php echo $action['text']

  • jQuery post.How to load invalid HTML markup to a div without breaking it 2010-10-14

    I am building a small CMS kind of application.I am loading a div with jQuery post method from the content returned from an asp.net page. <html> <body> <h3>Edit your posts</h3> <div id="divMArkupContainer"> </div>

  • ashx control returning image, jquery get size on load or .NET OnLoad methods not working 2011-01-10

    I have an ASHX handler returning an image on page load. I need to add a class to the image dynamically depending on the dimensions of the image. I have tried doing this using the following methods: Code Behind Method cs protected void Page_Load(objec

  • Jquery overlay exteral page loading error 2011-02-07

    I have a weired problem... I have egy JQuery overlay window which contains a link. By clicking that link the following function is called: function kep(s) { $('#facebox').data('overlay').close(); $('#gallery_over').overlay({ top: (viewportheight-501)

Copyright (C) dskims.com, All Rights Reserved.

processed in 0.182 (s). 11 q(s)