just in case it helps, here is the code i have so far:
var $loadAnim = $('<div id="loadAnim"><img
src="ajax-loader_light2.gif" /></div>').appendTo('body');
$loadAnim.ajaxStart(function(el)
{
// the following behavior will be done each time an
ajax call is triggered
var $loadTarget = $('#container'); // <!--
"#container" should be a variable or $.ajax stored property since in
my case, it changes often
console.log(el);
$loadAnim.css({
top: $loadTarget.offset().top,
left: $loadTarget.offset().left,
width: $loadTarget.width(),
height: $loadTarget.height()
}).show();
$loadTarget.load('demo_content.html', function()
{
$loadAnim.fadeOut(2000);
});
});
On Fri, Mar 6, 2009 at 11:44 AM, Alexandre Plennevaux
<aplennev...@gmail.com> wrote:
> thanks ryan, but i want to set it generically for all ajax calls, for
> instance, via ajaxStart() instead of having to attach the behaviour to
> every single trigger element.
>
> On Fri, Mar 6, 2009 at 11:30 AM, ryan.j <ryan.joyce...@googlemail.com> wrote:
>>
>> but since you already specify the target element for the .load() at
>> some point, you'll already have it to put in the callback?
>>
>> function doLoad(el, url) {
>> var contEl = $(el)
>> contEl .append('<img id="loadIcon" src="loading.png" />');
>> contEl .load( url, function(){
>> contEl .remove('#loadIcon');
>> });
>> }
>>
>> <a href=# onclick="doload('#myContainer','http://
>> www.google.co.uk')">load</a>
>>
>> On Mar 6, 10:14 am, Alexandre Plennevaux <aplennev...@gmail.com>
>> wrote:
>>> yes, thanks but that does not help my specific need: what i need to
>>> know is if the ajax object stores the container in which it will load
>>> the content in a property that i can retrieve, so that the load
>>> animation goes on top of it.
>>>
>>> On Fri, Mar 6, 2009 at 11:11 AM, ryan.j <ryan.joyce...@googlemail.com>
>>> wrote:
>>>
>>> > oh and it may or may not be any use, but you can grab all manner of
>>> > nice animated loading graphics here...http://www.ajaxload.info/
>
