Avatar billede swenn Nybegynder
19. juli 2007 - 19:18 Der er 5 kommentarer

Image Preloader

Hej Eksperter.
Jeg har en preloader til mine billeder, da jeg mest laver mine sider i ren grafik.
Indtil nu har jeg kun kunnet finde en preloader der loader hver enkelt billede. Dvs. at jeg skal indtaste hver enkelt billeds navn. Er det ikke muligt at lave en loader der tager en hel mappe ad gangen?

Den jeg har nu ser sådan ud:

<html>
<head>
<title>Preload Image Page</title>

<script language="JavaScript1.1">
<!-- begin hiding

/*
Preload Image With Update Bar Script (By Marcin Wojtowicz [one_spook@hotmail.com])
Submitted to and permission granted to Dynamicdrive.com to feature script in it's archive
For full source code to this script and 100's more, visit http://dynamicdrive.com
*/

// You may modify the following:
    var locationAfterPreload = "http://www.pointplus.dk/polle/start.html" // URL of the page after preload finishes
    var lengthOfPreloadBar = 150 // Length of preload bar (in pixels)
    var heightOfPreloadBar = 15 // Height of preload bar (in pixels)
    // Put the URLs of images that you want to preload below (as many as you want)
    var yourImages = new Array("http://www.pointplus.dk/polle/images/start_01.gif","http://www.pointplus.dk/polle/images/start_03.gif","http://www.pointplus.dk/polle/images/start_08.gif","http://www.pointplus.dk/polle/images/start_05.gif","http://www.pointplus.dk/polle/images/start_07.gif")

// Do not modify anything beyond this point!
if (document.images) {
    var dots = new Array()
    dots[0] = new Image(1,1)
    dots[0].src = "black.gif" // default preloadbar color (note: You can substitute it with your image, but it has to be 1x1 size)
    dots[1] = new Image(1,1)
    dots[1].src = "blue.gif" // color of bar as preloading progresses (same note as above)
    var preImages = new Array(),coverage = Math.floor(lengthOfPreloadBar/yourImages.length),currCount = 0
    var loaded = new Array(),i,covered,timerID
    var leftOverWidth = lengthOfPreloadBar%coverage
}
function loadImages() {
    for (i = 0; i < yourImages.length; i++) {
        preImages[i] = new Image()
        preImages[i].src = yourImages[i]
    }
    for (i = 0; i < preImages.length; i++) {
        loaded[i] = false
    }
    checkLoad()
}
function checkLoad() {
    if (currCount == preImages.length) {
        location.replace(locationAfterPreload)
        return
    }
    for (i = 0; i <= preImages.length; i++) {
        if (loaded[i] == false && preImages[i].complete) {
            loaded[i] = true
            eval("document.img" + currCount + ".src=dots[1].src")
            currCount++
        }
    }
    timerID = setTimeout("checkLoad()",10)
}
// end hiding -->
</script>

</head>

<body bgcolor="#FFFFFF">

<center>
<font size="4">Please be patient while some images<br>
are being preloaded...</font><p>
0%
<script language="JavaScript1.1">
<!-- begin hiding
// It is recommended that you put a link to the target URL just in case if the visitor wants to skip preloading
// for some reason, or his browser doesn't support JavaScript image object.
if (document.images) {
    var preloadBar = ''
    for (i = 0; i < yourImages.length-1; i++) {
        preloadBar += '<img src="' + dots[0].src + '" width="' + coverage + '" height="' + heightOfPreloadBar + '" name="img' + i + '" align="absmiddle">'
    }
    preloadBar += '<img src="' + dots[0].src + '" width="' + (leftOverWidth+coverage) + '" height="' + heightOfPreloadBar + '" name="img' + (yourImages.length-1) + '" align="absmiddle">'
    document.write(preloadBar)
    loadImages()
}
document.write('<p><small><a href="java script:window.location=locationAfterPreload">Skip Preloading</a> &nbsp;| &nbsp;<a href="http://www.pointplus.dk/">Script Credits</a></small></p>')
// end hiding -->
</script>
</center>

</body>
</html>
Avatar billede olebole Juniormester
19. juli 2007 - 19:23 #1
<ole>

Nej, JavaScript har ingen mulighed for at vide, hvad der ligger på din server. Til det skal du bruge noget serverside scripting (f.eks. PHP, ASP, el.lign.)

/mvh
</bole>
Avatar billede olebole Juniormester
19. juli 2007 - 19:25 #2
- og så må jeg på det kraftigste fraråde at bruge ImageReady til at generere HTML. Er der én ting, det program ikke kan, så er det det  ;o)
Avatar billede swenn Nybegynder
19. juli 2007 - 19:44 #3
Det var ærgeligt. Du kender vel ikke et sted man kan finde sådan en i PHP.

Jeg bruger bare Photoshop. Har ingen forstand på programmering, så må nøjes med det :o/
Avatar billede olebole Juniormester
20. juli 2007 - 11:50 #4
Hvis du omdøber din fil til '.php' i stedet for '.html', som den sikkert hedder nu, kan du prøve at skrive dette i din fil:

<?php
$dir = "http://www.pointplus.dk/polle/images/"; // Ret selv stien her til
$aArr = array();
    if(is_readable($dir)) {
        $d = dir($dir);
            while (false !== ($file = $d->read())) {
                if (is_file($dir ."/". $file)) {
            $aArr[] = "\"" . $dir . $file . "\"";
                }     
            }

        $d->close();
    }
?>
<html>
<head>
<title>Preload Image Page</title>

<script language="JavaScript1.1">
<!-- begin hiding

/*
Preload Image With Update Bar Script (By Marcin Wojtowicz [one_spook@hotmail.com])
Submitted to and permission granted to Dynamicdrive.com to feature script in it's archive
For full source code to this script and 100's more, visit http://dynamicdrive.com
*/

// You may modify the following:
    var locationAfterPreload = "http://www.pointplus.dk/polle/start.html" // URL of the page after preload finishes
    var lengthOfPreloadBar = 150 // Length of preload bar (in pixels)
    var heightOfPreloadBar = 15 // Height of preload bar (in pixels)
    // Put the URLs of images that you want to preload below (as many as you want)
    var yourImages = new Array(<?=implode(",", $aArr)?>)

// Do not modify anything beyond this point!
if (document.images) {
    var dots = new Array()
    dots[0] = new Image(1,1)
    dots[0].src = "black.gif" // default preloadbar color (note: You can substitute it with your image, but it has to be 1x1 size)
    dots[1] = new Image(1,1)
    dots[1].src = "blue.gif" // color of bar as preloading progresses (same note as above)
    var preImages = new Array(),coverage = Math.floor(lengthOfPreloadBar/yourImages.length),currCount = 0
    var loaded = new Array(),i,covered,timerID
    var leftOverWidth = lengthOfPreloadBar%coverage
}
function loadImages() {
    for (i = 0; i < yourImages.length; i++) {
        preImages[i] = new Image()
        preImages[i].src = yourImages[i]
    }
    for (i = 0; i < preImages.length; i++) {
        loaded[i] = false
    }
    checkLoad()
}
function checkLoad() {
    if (currCount == preImages.length) {
        location.replace(locationAfterPreload)
        return
    }
    for (i = 0; i <= preImages.length; i++) {
        if (loaded[i] == false && preImages[i].complete) {
            loaded[i] = true
            eval("document.img" + currCount + ".src=dots[1].src")
            currCount++
        }
    }
    timerID = setTimeout("checkLoad()",10)
}
// end hiding -->
</script>

</head>

<body bgcolor="#FFFFFF">

<center>
<font size="4">Please be patient while some images<br>
are being preloaded...</font><p>
0%
<script language="JavaScript1.1">
<!-- begin hiding
// It is recommended that you put a link to the target URL just in case if the visitor wants to skip preloading
// for some reason, or his browser doesn't support JavaScript image object.
if (document.images) {
    var preloadBar = ''
    for (i = 0; i < yourImages.length-1; i++) {
        preloadBar += '<img src="' + dots[0].src + '" width="' + coverage + '" height="' + heightOfPreloadBar + '" name="img' + i + '" align="absmiddle">'
    }
    preloadBar += '<img src="' + dots[0].src + '" width="' + (leftOverWidth+coverage) + '" height="' + heightOfPreloadBar + '" name="img' + (yourImages.length-1) + '" align="absmiddle">'
    document.write(preloadBar)
    loadImages()
}
document.write('<p><small><a href="java script:window.location=locationAfterPreload">Skip Preloading</a> &nbsp;| &nbsp;<a href="http://www.pointplus.dk/">Script Credits</a></small></p>')
// end hiding -->
</script>
</center>

</body>
</html>

NB: filen virker _kun_ på en server med PHP-understøttelse ... ikke lokalt på din PC  ;o)
Avatar billede olebole Juniormester
20. juli 2007 - 11:52 #5
Ups ... ret linjen:
    $dir = "http://www.pointplus.dk/polle/images/"; // Ret selv stien her til

- til:
    $dir = $_SERVER["DOCUMENT_ROOT"]."/polle/images/"; // Ret selv stien her til
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester