ASP/DHTML Image Preloader

ASP/DHTML Image Preloader

- 中国WEB开发者网络 (http://www.webasp.net)
-- 技术教程 (http://www.webasp.net/article/)
--- ASP/DHTML Image Preloader (http://www.webasp.net/article/4/3746.htm)

-- 作者：未知
-- 发布日期： 2003-07-11

Tutorials & Code Snips: Graphics & Charts: Images\\

This ASP Script recurses through a directory tree and loads images into a DHTML preloader.

First off, big thanks to Brian from Script Asylum for letting me use his DHTML site preloader. This
version will be even less work, because all you do is tell the ASP to drill down through a directory
structure looking for images, and it will place all the image names into an array, and off it goes.
The setup for this is incredibly simple. First off, open Preloader.asp, and change the following variables:
- boolRecurse: Tell the script to drill down through subdirectories within the folder you choose
(True/False)
- strVirtualRoot: The folder that contains all the images

<%
boolRecurse = True ' Recurse through subdirectories? True/False
strVirtualRoot = "../../Images" ' Directory
strRootFolder = Server.MapPath(strVirtualRoot) ' Grab the directory
intSize = 0

Set objFSO = Server.CreateObject("Scripting.FileSystemObject")
Set objFolder = objFSO.GetFolder(strRootFolder)

strOutput = TraverseFolder(objFolder, strVirtualRoot, boolRecurse)
strOutput = mid(strOutput, 1, Len(strOutput)-2)

Set objFSO = Nothing
Set objFolder = Nothing

Function TraverseFolder(objFolder, strVirtualRoot, boolRecurse)
strOutput = ""

arrImages = Array("gif", "jpg", "png", "jpeg")

'Only process directories that do NOT start with
'an underscore.
    If Not Left(objFolder.Name, 1) = "_" then
          Dim objFile, strPath, strFileName, strFileSize, strExtension

          'Iterate through each file in the folder
          For Each objFile in objFolder.Files
              ' Obtain the extension of the current file
              strPath = objFile.Path
              strFileName = objFile.Name
              intFileSize = objFile.Size
              strExtension = Ucase(Right(strPath, Len(strPath) - InStrRev(strPath, ".")))


              ' See if file is an image
              For x = LBound(arrImages) to UBound(arrImages)
                    If strExtension = Ucase(arrImages(x)) then
                        strOutput = strOutput & "'" & strVirtualRoot & "/" & strFileName & "', "
                        intSize = intSize + intFileSize
                    End If
              Next
          Next

          If boolRecurse then
              'Recurse through the folder's subdirectories
              For Each objSubFolder in objFolder.SubFolders
                    strOutput = strOutput & TraverseFolder(objSubFolder, strVirtualRoot & "/" &
objSubFolder.Name, boolRecurse)
              Next
          End If
          TraverseFolder = strOutput
    End If
End Function
%>

Second step is to change the look and feel variables of the site preloader, in Progressbar.asp.
Also be sure to change the action variable, this is a function which will perform an action when all the
images are loaded, e.g. go to another page, pop up an alert, etc.


// Progressbar - Version 2.5
// Author: Brian Gosselin of http://scriptasylum.com
// PUT THE NAMES OF ALL YOUR IMAGES THAT NEED TO BE "CACHED" IN THE "imagenames" ARRAY.
// DONT FORGET THE COMMA BETWEEN EACH ENTRY, OR THE TICK MARKS AROUND EACH NAME.
// WHEN ALL THE IMAGES ARE DONE LOADING, THE "imagesdone" VARIABLE IS SET TO "TRUE"

var imagenames=[<%=strOutput%>];

var yposition = 50; // POSITION OF LOAD BAR FROM TOP OF WINDOW, IN PIXELS
var loadedcolor = '#AAAAAA' ; // PROGRESS BAR COLOR
var unloadedcolor = 'lightgrey'; // BGCOLOR OF UNLOADED AREA
var barheight = 20; // HEIGHT OF PROGRESS BAR IN PIXELS (MIN 20)
var barwidth = 400; // WIDTH OF THE BAR IN PIXELS
var bordercolor = 'black'; // COLOR OF THE BORDER
var intSize = '<%=FormatNumber(intSize/1024, 0)%>'; // SIZE IN BYTES OF ALL THE IMAGES

// THE FUNCTION BELOW CONTAINS THE ACTION(S) TAKEN ONCE IMAGES ARE DONE LOADING.
// IF NO ACTION IS DESIRED, TAKE EVERYTHING OUT FROM BETWEEN THE CURLY BRACES ({})
// BUT LEAVE THE FUNCTION NAME AND CURLY BRACES IN PLACE.
// PRESENTLY, IT IS SET TO DO NOTHING, BUT CAN BE CHANGED EASILY.
// TO CAUSE A REDIRECT, INSERT THE FOLLOWING LINE IN IT:
document.location.href="http://redirect_page.html";
// Update: setCookie() used to "remember" that people have loaded the page, and bypass preloading.

var action=function()
{
setCookie();
}

Click here to test this script (Preload.html)
Download source (PreLoad.zip)

External Links
    http://scriptasylum.com

webasp.net