This snippet enables preloading of images that may be used in rollovers, or in other cases where an image is shown “on demand”.

Use in conjunction with Smart Buttons strongly recommended. This snippet will minimize the risk of the annoying “flicker” effect that can occur when a visitor moves the mouse over the button for the first time.

Download it here.

Picture Preloader Snippet’s User Rating:



To use:

Unzip the file. Double-click the snippet file to install, close RW.

Open RW, open your project.

In the page you wish to use the Picture Preloader, open the Page Inspector.

Go to the “Header” tab, within that open the “Header” tab.

Drag the snippet into this field.

The snippet has three example image files. You may add/remove them as necessary.

As another example, see the code used on my “Code of Interest” page, that loads the button images:

<script type="text/javascript">

    if (document.images)
    {
      preload_image_object = new Image();
      // set image url
      image_url = new Array();
      image_url[0] = "http://pagesofinterest.net/code/of_interest_assets/BlackHover.jpg";
      image_url[1] = "http://pagesofinterest.net/code/of_interest_assets/BlackHoverBoxTop.jpg";
      image_url[2] = "http://pagesofinterest.net/code/of_interest_assets/BlackIdle.jpg";
      image_url[3] = "http://pagesofinterest.net/code/of_interest_assets/BlueHover.jpg";
      image_url[4] = "http://pagesofinterest.net/code/of_interest_assets/BlueHoverBoxBottom.jpg";
      image_url[5] = "http://pagesofinterest.net/code/of_interest_assets/BlueIdle.jpg";
      image_url[6] = "http://pagesofinterest.net/code/of_interest_assets/GreyActive.jpg";
      image_url[7] = "http://pagesofinterest.net/code/of_interest_assets/GreyHoverBottom.jpg";
      image_url[8] = "http://pagesofinterest.net/code/of_interest_assets/GreyHoverBoxBottom.jpg";
      image_url[9] = "http://pagesofinterest.net/code/of_interest_assets/GreyIdle.jpg";
      image_url[10] = "http://pagesofinterest.net/code/of_interest_assets/LycheeHover.jpg";
      image_url[12] = "http://pagesofinterest.net/code/of_interest_assets/LycheeHoverBoxTop.jpg";
      image_url[13] = "http://pagesofinterest.net/code/of_interest_assets/LycheeIdle.jpg";

       var i = 0;
       for(i=0; i<=3; i++)
         preload_image_object.src = image_url[i];
    }
   </script>

If you find it useful, please consider making a small donation
•
I'd really appreciate it!
•