Refreshing an image + preloading it

Gareth · 08-27-2008, 05:26 PM

Hi guys,

Basically, I have a site which just basically uses the glob and array_rand functions to sweep my image dir and show a random image.

Now, I would like to implement two things, however the main thing is to refresh the image, without refreshing the whole page.
All it needs to be is a simple refresh: it doesn't need to know what image its going to show next, as the array_rand will sort that out on the refresh.

This leads me onto something which I reckon is more complicated. The very fact that it doesn't know what it is showing next means that it can't preload it- another feature I wish to implement.

I am not asking for any code (although I would really appreciate it if you did give me some), just your ideas on how they can be implemented..

Does anyone have any ideas?

Gareth

flyingbuddha · 08-27-2008, 06:38 PM

Use jQuery.
Make the image src point to your script, and append a querystring to the end with a unique number (using Date() / getSeconds()) every time you want to refresh the image (assuming you'll use something such as setInterval())

Using jQuery, you could use the load event to monitor when it's loaded, you might need to trigger this event each time you have refreshed the src -

$('img').load(function(){
alert('loaded');
});

Gareth · 08-28-2008, 01:52 AM

And how exactly would I refresh the image? Your last two paragraphs lost me, too :P

flyingbuddha · 08-28-2008, 07:32 AM

So you are looking for some code ;)

I've not tested this as I'm off to work now, you may have some problems in PC IE, if you do, let me know and I'll fix it for you.

Code:

var refresh = setInterval(function(){
	
	// create a new timestamp
	var timestamp = new Date();
	
	// keep track of the image we're going to work on
	var img = document.getElementById('id_of_your_img');
	
	// make sure the pic. exists before operation
	if(img){
	
		// get the source of the pic. (minus any previous appenditures)
		var src = img.getAttribute('src').replace(/\?time=.+$/i,"");
		
		// set the source of the pic. to the current src + timestamp (querystring)
		img.setAttribute('src',src +"?time="+timestamp.getSeconds());
	}
	
},1000);

Gareth · 08-28-2008, 06:52 PM

I'm really not following this, hehe. So am I correct in saying that I put the script as the source of the image with the time details? but how does the script know where to get the images etc? This is my php:

PHP Code:


			
    <?php

        

        $getImage = glob ( 'i/*.jpg' );

        $randomImage = $getImage[array_rand($getImage, 1)];

                    

        if ( isset( $_GET['num'] ) ) {

                        

            $getNum       = $_GET['num'];

            

            if ( !is_numeric( $getNum ) ){

                

                echo '<div id="image">Oops. Malformed URL! <br /> (Has to be a number...)</div>';

                

                exit();

                

            }

            

            echo '    <div id="image">

            <a href="http://laughomatic.net" ><img src="i/lom (' . $getNum . ').jpg" /></a>

            </div>

            

            <p><a id="refresh" href="http://laughomatic.net">More!</a></p>

            <p><input type="text" value="http://laughomatic.net/?num=' . $getNum . '" /></p>

            

            ';

                        

        } else {

            

            echo '    <div id="image">

            <a href="javascript:this.location.reload();" ><img src="' . $randomImage . '" /></a>

            </div>

    

            <a id="refresh" href="javascript:this.location.reload();" >Next!</a>';

    

            $pFile = (object) pathinfo($randomImage);

            echo '<p><input type="text" value="http://laughomatic.net/?num=' . preg_replace('~[^\d]~i', '', $pFile->filename) . '" /></p> ';

            

        }



    ?>

Sorry for being such a nuisance :(