Quick Jquery Load Help

suarve · 26 Jun 2009 at 13:09

Hi,

I'm basically trying to load a div using a ajax - displaying a loading image until the content has loaded. The client wants the loading image to display for a couple of seconds before the content appears. How can I do this? My code (that works) is below:

Code:

    $('#content-full').html('<p><img src="ajax-loader.gif" width="100" height="100" /></p>');
    $('#content-full').load("gallery.php");

Thanks

suarve · 26 Jun 2009 at 16:29

Think I solved it!

Just added the following at the bottom of gallery.php

PHP:

sleep(3);

suarve · 26 Jun 2009 at 16:38

Actually, while I'm doing JQuery, is there any way to combine the following into a single function?

Code:

    $('div.thumb img').hover(function() {
        $(this).fadeTo(200, 0.55);
    }, function() {
        $(this).fadeTo(200,1.0);
    });
    
    $('div.thumb-new-line img').hover(function() {
        $(this).fadeTo(200, 0.55);
    }, function() {
        $(this).fadeTo(200,1.0);
    });

fini · 26 Jun 2009 at 16:54

suarve said:
Think I solved it!

Just added the following at the bottom of gallery.php

PHP:

sleep(3);

This only works if it takes that long - if it takes less time then you're slowing it down for no reason. If it takes more time then the loading will disappear before the div appears.

My first thought is to have at the bottom of the gallery.php some jquery that hides the gif by setting its class to 'hidden' or whatever you use as you default 'hide stuff please' class.

suarve · 26 Jun 2009 at 17:27

Bah, the lightbox plugin I was using has stopped working now

As I'm using .load to load gallery.php. If I don't use .load and just stick with plain html its fine, as soon as I try to load the content via ajax the plugin fails. Any idea how I would work around this?

Thanks

robmiller · 26 Jun 2009 at 19:21

For the question in your first post, use setTimeout in Javascript so that the wait is client-side, not server-side. It's a silly thing to do, though: why unnecessarily slow down the user?

Tripnologist · 28 Jun 2009 at 10:45

suarve said:
Actually, while I'm doing JQuery, is there any way to combine the following into a single function?

Code:

   $('div.thumb img, div.thumb-new-line img').hover(function() {
        $(this).fadeTo(200, 0.55);
    }, function() {
        $(this).fadeTo(200,1.0);
    });

suarve · 29 Jun 2009 at 10:19

robmiller said:
For the question in your first post, use setTimeout in Javascript so that the wait is client-side, not server-side. It's a silly thing to do, though: why unnecessarily slow down the user?

Using PHP was the only way I could think of. Didn't know you could do it via JavaScript.

Tripnologist said:

Cheers.

With my problem about the lightbox not working with the funtion well I think I solved it - the load function uses get by default and without any parameters passed the funtion. When I passed it some parameters and the function that initialises the lightbox it all worked. E.g.

Code:

    $('#gallery').load("gallery.php",{limit: 50}, function(){ $("a[rel^='gallery-image']").prettyPhoto({
                                                                            animationSpeed: 'normal', 
                                                                            padding: 40, 
                                                                            opacity: 0.65, 
                                                                            showTitle: true, 
                                                                            allowresize: true, 
                                                                            counter_separator_label: ' of ', 
                                                                            theme: 'light_rounded',
                                                                            callback: function(){}
                                                                            });
                                                                               $('#loading').hide().fadeOut("slow");
                                                                            $('#gallery').hide().slideDown("normal");
     });