Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8

Thread: Pre-Load Images

  1. #1
    New Coder
    Join Date
    Jul 2008
    Location
    Washington
    Posts
    12
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Pre-Load Images

    Is there a way to Pre-Load the images on the site without having to add new images to the array each time one is added. Basically what I need is the code automatically searches the images folder and creates an array to Pre-Load all the images in the image folder so when it goes to another page on the site it is automatically loaded in the cache.

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,898
    Thanks
    203
    Thanked 2,530 Times in 2,508 Posts
    Quote Originally Posted by moogle1979 View Post
    Is there a way to Pre-Load the images on the site without having to add new images to the array each time one is added. Basically what I need is the code automatically searches the images folder and creates an array to Pre-Load all the images in the image folder so when it goes to another page on the site it is automatically loaded in the cache.

    JavaScript is purely a client-side language, and has no capability to read from or write to a file (except a cookie), access a database or the client's operating system. So this can be done only with server-side scripting.

  • #3
    Regular Coder
    Join Date
    Dec 2008
    Location
    Tannhäuser Gate
    Posts
    286
    Thanks
    7
    Thanked 58 Times in 57 Posts
    You may find this tutorial useful for your purpose.

  • #4
    New Coder
    Join Date
    Jul 2008
    Location
    Washington
    Posts
    12
    Thanks
    2
    Thanked 0 Times in 0 Posts
    I have never heard of JavaScript calling a php file.

  • #5
    Regular Coder
    Join Date
    Dec 2008
    Location
    Tannhäuser Gate
    Posts
    286
    Thanks
    7
    Thanked 58 Times in 57 Posts
    As long as output from php file is valid Javascript code, it works. Try that tutorial, it is actually quite close to what you want to achieve, even if its mixed php with javascript.

  • #6
    New Coder
    Join Date
    Jul 2008
    Location
    Washington
    Posts
    12
    Thanks
    2
    Thanked 0 Times in 0 Posts
    I was thinking too if I could just somehow pull the images off with php into an array and read that array with JavaScript to Pre-Load the images, thanks I will try it out

  • #7
    Senior Coder
    Join Date
    Oct 2008
    Location
    Long Beach
    Posts
    1,196
    Thanks
    36
    Thanked 164 Times in 164 Posts
    Here I wrote this for you.

    Test: http://buildyourownbagel.com/test/ge...hp?dir=images/

    get_images_in_dir.php:
    Code:
    <?php
    $extensions = array("jpg","gif","png");
    $all_files = scandir($_GET["dir"]);
    $images = array();
    for ($i=0;$i<count($all_files);$i++)
    	{
    	$is_image = false;
    	for ($x=0;$x<count($extensions);$x++)
    		{
    		if (substr_count(strtolower($all_files[$i]),$extensions[$x]) != 0)
    			{
    			$is_image = true;
    			break;
    			}
    		}
    	if ($is_image) array_push($images,$all_files[$i]);
    	}
    echo("[");
    if (count($images) != 0) echo('"'.implode('","',$images).'"');
    echo("]");
    ?>
    All you have to do is send a synchronous xmlhttp request to "get_images_in_dir.php" with the directory in question attached as a variable. It will return a string which you can eval into a JS array.
    Last edited by itsallkizza; 01-29-2009 at 04:21 PM.
    Feel free to e-mail me if I forget to respond ;)
    ohsosexybrit@gmail.com

  • Users who have thanked itsallkizza for this post:

    moogle1979 (01-29-2009)

  • #8
    New Coder
    Join Date
    Jul 2008
    Location
    Washington
    Posts
    12
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Thanks, I will probably write a js file with an AJAX function and a few arguments in the function so I can call that function from another page and use the arguments to determine how to run the function.

    like

    Code:
    function makeRequest(page) {
    	if (window.XMLHttpRequest) {
    		xhr = new XMLHttpRequest();
    	}
    	else {
    		if (window.ActiveXObject) {
    			try {
    				xhr = new ActiveXObject("Microsoft.XMLHTTP");
    			}
    			catch (e) { }
    		}
    	}
    
    	if (xhr) {
    		xhr.onreadystatechange = showContents;
    		xhr.open("GET", page, true);
    		xhr.send(null);
    	}
    	else {
    		document.getElementById("updateArea").innerHTML = "Sorry, but I couldn't create an XMLHttpRequest";
    	}
    }
    Then I can use the page variable to change the page requested per what I need


  •  

    LinkBacks (?)

    1. 06-06-2014, 12:12 AM

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •