Ryan Price » Javascript http://www.ryanprice.ca The definitive proof that I'm a geek at heart Wed, 01 Sep 2010 18:23:09 +0000 en hourly 1 http://wordpress.org/?v=3.0.1 How to Preload an Entire Directory of Images Using Javascript and PHP http://www.ryanprice.ca/how-to-preload-an-entire-directory-of-images-using-javascript-and-php/ http://www.ryanprice.ca/how-to-preload-an-entire-directory-of-images-using-javascript-and-php/#comments Mon, 14 May 2007 19:54:56 +0000 Ryan Price http://www.ryanprice.ca/work/?p=16 This post is from Ryan Price's blog.

How to Preload an Entire Directory of Images Using Javascript and PHP

]]> Why Preload?

The main reason you want to preload images is when they are being used for mouse-over or roll-over effects. If they're not displayed by the page when it loads then the page will wait until the image is needed to load it. However, this can result in a delay to the mouse-over/rollover effect while the image loads. In steps the preload.

Before we dig into how this works, I'll provide the finished code for those who just want to copy and paste. As always, click the "PLAIN TEXT" above the code to view it in a copy & paste friendly format. For those who want to know how it works, read on.

PLAIN TEXT
PHP:
  1. //This function will cycle through the directory it is sent
  2. //$x is used to count the number of images, we set it to 0 by default
  3. function preloadImages($directory, $x = 0) {
  4.     //first, lets make sure the user sent a directory.  If they didn't, return "false"
  5.     if(!isset($directory))  { return false; }
  6.     // if the path has a slash at the end we remove it here
  7.     if(substr($directory,-1) == '/') {
  8.         $directory = substr($directory,0,-1);
  9.     }
  10.     // if the path is not valid or is not a directory ...
  11.     if(!file_exists($directory) || !is_dir($directory))    {
  12.         // ... we return false and exit the function
  13.         return FALSE;
  14.     // ... if the path is not readable
  15.     } elseif(!is_readable($directory))    {
  16.         // ... we return false and exit the function
  17.         return FALSE;
  18.     // ... else if the path is readable
  19.     } else {
  20.         // we open the directory
  21.         $handle = opendir($directory);
  22.         // and scan through the items inside
  23.         while (($item = readdir($handle))!== FALSE ) {
  24.             // if the filepointer is not the current directory
  25.             // or the parent directory
  26.             if($item != '.' && $item != '..') {
  27.                 // we build the new path to access
  28.                 $path = $directory.'/'.$item;
  29.                 // if the new path is a directory
  30.                 if(is_dir($path)) {
  31.                     // we call this function with the new path, and the current counter
  32.                     preloadImages($path, $x);
  33.                 // if the new path is a file
  34.                 } else {
  35.                     // we get the file info
  36.                     list($width, $height, $type, $attr) = getimagesize($path);
  37.                     //and output the javascript code
  38.                     echo "pic".$x." =  new Image(".$width.",".$height.");\n";
  39.                     echo "pic".$x.".src=\"".$path."\";\n";
  40.             $x++;
  41.                 }
  42.             }
  43.         }
  44.         // close the directory
  45.         closedir($handle);
  46.  
  47.         // return success
  48.         return TRUE;
  49.     }
  50. }

To implement it, place it in the head section of your document like so:

PLAIN TEXT
HTML:
  1. <script language="JavaScript">
  2. <!--
  3. if (document.images)
  4. {
  6. <?php preloadImages("images") or die ("Unable to preload images"); ?>
  7.  
  8. }
  9. //-->
  10. </script>

images is the location of the images directory (in this case, its at the same level as the file that the javascript code is in). You may have to change this to match yours.

Note: This assumes that all files in the directory and sub-directories are images

Now lets go through the code and analyze whats happening.

This post is from Ryan Price's blog.

How to Preload an Entire Directory of Images Using Javascript and PHP

]]> http://www.ryanprice.ca/how-to-preload-an-entire-directory-of-images-using-javascript-and-php/feed/ 3 Why Does Perfectly Valid Code Not Validate When Checked? http://www.ryanprice.ca/why-does-perfectly-valid-code-not-validate-when-checked/ http://www.ryanprice.ca/why-does-perfectly-valid-code-not-validate-when-checked/#comments Fri, 11 May 2007 17:36:39 +0000 Ryan Price http://www.ryanprice.ca/work/?p=12 This post is from Ryan Price's blog.

Why Does Perfectly Valid Code Not Validate When Checked?

]]> When trying to validate XHTML code I ran into one problem I hadn't had before.

Here was the error I received:

1. Error Line 249 column 8: end tag for element "div" which is not open.

It took a little digging with Firebug to figure it out (as I wasn't super-familiar with the layout at the time), but the problem was with the validator's ability to handle javascript - not the code I was using.

The page I was looking at was one of the university research pages that I work on at work. Whoever set up the site initially was using javascript to randomly select a couple of the researchers to display. Here is the code (note that Rand was a variable assigned a random number between 0 and 3 earlier):

PLAIN TEXT
HTML:
  1. <script language="JavaScript" type="text/javascript">
  2. <!--
  4. if(Rand == 0){
  5.   document.write("<div id=0>")
  6.   }
  7. else {
  8.   document.write("<div class=hidden id=0>")
  9. }
  10. //-->
  11. </script>
  12.  
  13.   <!--  All the Code for Researcher 0's work would be here -->
  14.    
  15.   </div>
  16.  
  17. <script language="JavaScript" type="text/javascript">
  18. <!--
  20. if(Rand == 1){
  21.   document.write("<div id=1>")
  22.   }
  23. else {
  24.   document.write("<div class=hidden id=1>")
  25. }
  26. //-->
  27. </script>
  28.  
  29. <!--  All the Code for Researcher 1's work would be here -->
  30.  
  31.   </div>
  32.  
  33. <script language="JavaScript" type="text/javascript">
  34. <!--
  36. if(Rand == 2){
  37.   document.write("<div id=2>")
  38.   }
  39. else {
  40.   document.write("<div class=hidden id=2>")
  41. }
  42. //-->
  43. </script>
  44.  
  45. <!--  All the Code for Researcher 2's work would be here -->
  46.  
  47. </div>
  48.  
  49. <script language="JavaScript" type="text/javascript">
  50. <!--
  52. if(Rand == 3){
  53.   document.write("<div id=3>")
  54.   }
  55. else {
  56.   document.write("<div class=hidden id=3>")
  57. }
  58. //-->
  59. </script>
  60.  
  61. <!--  All the Code for Researcher 3's work would be here -->
  62.       
  63.       </div>

I've simplified the code for ease of reading. You can see that div opening tag occurs inside the javascript while the closing tag appears in the HTML. The javascript is used to set the display property so that anyone not selected is hidden.

At the time of this writing this is a quirk with the validator. While end tags are recognized within script elements other tags are not. This includes start tags and comments.

To get around this, we can include the closing div tags in javascript as well. They will need to be escaped though (remember end tags are recognized). To do this:

PLAIN TEXT
HTML:
  1. <!-- Replace all </div> tags with the following javascript -->
  2.  
  3. <script language="JavaScript" type="text/javascript">
  4. <!--
  6. document.write("<\/div>");
  7.  
  8. //-->
  9. </script>

Adding the extra slash prevents that string from being parsed as markup. For a complete explanation, see the complete FAQ entry about the issue.

On a side note: This could've been avoided all together if the random selection was performed using a server side language such as PHP. Unfortunately, the university currently doesn't use PHP for security issues (ie: they don't know enough about PHP to be comfortable using it in development, as it is quite secure when used properly).

This post is from Ryan Price's blog.

Why Does Perfectly Valid Code Not Validate When Checked?

]]> http://www.ryanprice.ca/why-does-perfectly-valid-code-not-validate-when-checked/feed/ 5