PHP Image Loading

I have a PHP Image that I use like this:

<img src="image.php">

Sometimes it takes up to 10 seconds to render (there are some heavy dataloads coming in from an API). I开发者_Go百科t works great but there's no way of telling whether anything is happening, I was wondering if there was a way I could show a Loading message while its doing its business, either in Javascript or PHP.

Thanks!

<img src="image.php" style="background: url(loading.gif) no-repeat center center;" />

Where loading.gif could be something like an ajax spinner animation. I use this technique all the time.

Check out this example

HTML

<ul id="portfolio">
<li class="loading"></li>
<li class="loading"></li>
<li class="loading"></li>
</ul>

Javascript

// DOM ready
$(function () {

            // image source
            var images = new Array();
                images[0] = 'http://farm4.static.flickr.com/3293/2805001285_4164179461_m.jpg';
                images[1] = 'http://farm4.static.flickr.com/3103/2801920553_656406f2dd_m.jpg';
                images[2] = 'http://farm41.static.flickr.com/3248/2802705514_b7a0ba55c9_m.jpg';

            // loop through matching element
            $("ul#portfolio li").each(function(index,el){
                    // new image object
                    var img = new Image();
                    // image onload
                    $(img).load(function () {
                        // hide first
                        $(this).css('display','none'); // since .hide() failed in safari
                        //
                        $(el).removeClass('loading').append(this);
                        $(this).fadeIn();
                    }).error(function () {
                        $(el).remove();
                    }).attr('src', images[index]);
            });

        });

CSS

ul#portfolio { margin:0; padding:0; }
ul#portfolio li { float:left; margin:0 5px 0 0; width:250px; height:250px; list-style:none; }
ul#portfolio li.loading { background: url(http://www.codedigest.com/img/loading.gif) no-repeat center center; width:50px;height:50px}

Check out the DEMO

The Code:

/*
overlay function:
-------------------------
Shows fancy ajax loading message. To remove this message box,
simply call this from your code:

$('#overlay').remove();

*/

function overlay()
{
    if (!$('#overlay').is(':visible'))
    {
        $('<div id="overlay">Working, please wait...</div>').css({
            width:'300px',
            height: '80px',
            //position: 'fixed', /* this is not suppported in IE6 :( */
            position: 'absolute',
            top: '50%',
            left: '50%',
            background:'url(images/spinner.gif) no-repeat 50% 50px #999999',
            textAlign:'center',
            padding:'10px',
            border:'12px solid #cccccc',
            marginLeft: '-150px',
            //marginTop: '-40px',
            marginTop: -40 + $(window).scrollTop() + "px",
            zIndex:'99',
            overflow: 'auto',
            color:'#ffffff',
            fontWeight:'bold',
            fontSize:'17px',
            opacity:0.8,
            MozBorderRadius:'10px',
            WebkitBorderRadius:'10px',
            borderRadius:'10px'
        }).appendTo($('body'));
    }
}

You can edit background: property above to specify loading image too. You need to call overlay() function when you want to show the loading message. Later, you can use $('#overlay').remove(); to remove the loading message any time.

Why not try caching the image object? Would reduce the load? Or is this something that is always updating? Your JavaScript approach would simply be a image pre-loader or handler function that would replace the 'img' with a loading indicator. Look @ jQuery for a simple way of doing this.

<img src="image.php">loading...</img>