Preloader tutorial!

Dieses Thema im Forum "Webentwicklung" wurde erstellt von O²BoOn, 8. November 2005 .

Schlagworte:
Status des Themas:
Es sind keine weiteren Antworten möglich.
  1. 8. November 2005
    Also das ist ein tut für einen Pre-loader!

    Ein Preloader läd bilder und andere dateien dadurch sind alle dateien auf einer website auf einmal verfügbar!

    Es können NUR Bilder und keine dokumente, Shockwave dateien oder ähnliches hochgeladen werden!

    (Ihr müsst den dateinamen richtig schreiben also auch mit .euer_format (z.b. image_01.gif)

    So hier das tut:

    Kopiert den folgenden text einfach in den Editor und speichert es als preload.js in euer website verzeichniss
    Code:
    var locationAfterPreload = "root/index.php?action=news"
var lengthOfPreloadBar = 150
var heightOfPreloadBar = 10
var yourImages = new Array(
"images/image_01.gif",
"images/image_box_02.gif",
"images/image_box_03.gif",
"images/image_box_04.gif")

if (document.images) {
var dots = new Array() 
dots[0] = new Image(1,1)
dots[0].src = "images/preload_1.gif"
dots[1] = new Image(1,1)
dots[1].src = "images/preload_2.gif"
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)
}
    Jetzt müsst ihr den Preloader modifizieren:

    - var locationAfterPreload = "": Hier eure Index-Datei angeben auf die der Preloader nach Beendung des Ladevorgangs weiterleiten soll. Die sollte auch die Seite sein die vorgeladen wird.

    - var lengthOfPreloadBar = 150: Die Länge des Lade-Balkens in Pixel.

    - var heightOfPreloadBar = 10: Die Höhe des Lade-Balkens in Pixel.

    - var yourImages = new Array(): Innerhalb der klammern werden untereinander die einzelnen Bilder, die vorausgeladen werden sollen, eingetragen (siehe Anordnung im obigen Code-Fenster).

    - dots[0].src = "images/preload_1.gif": Hier wird der Ladebalken-Hintergrund des Preloaders definiert, dazu benötigt man ein 1x1 Pixel großes Gif, welches mit der gewünschten Farbe gefüllt ist. Dieses Bild am besten in euer Image-Verzeichnis ablegen und den Pfad hier entsprechend angeben.

    - dots[1].src = "images/preload_2.gif": Hier wird der Ladebalken-Vordergrund, also der Balken, der später den Ladefortschritt des Preloaders anzeigt, definiert, dazu benötigt man ein 1x1 Pixel großes Gif, welches mit der gewünschten Farbe gefüllt ist. Dieses ebenfalls in euer Image-Verzeichnis ablegen und den Pfad hier entsprechend angeben.

    Jetzt müsst ihr ein neues editor fenster öffnenund den folgenden code reinkopieren nennt das dokument dann z.b. preload.html:
    Code:
    <head>
<script language="JavaScript" src="preload.js" type="text/javascript"></script>
<head>
    Jetzt könnt ihr den Preloader nach euren vorstellungen gestalten z.B. andere farbe, schrift...

    nun nur noch den folgenden code einfach in die preload.html datei kopieren und dann wars das auch schon!
    Code:
    <table width="300" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="300" height="75" align="center" bgcolor="#FFFFFF"> 
<center>
preloading images, please wait...<br><br>
<font color="#000000">0%</font> 
<script language="JavaScript1.1">
<!--
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('<font color="#000000"> 100%</font><br><br><a href="javascript:window.location=locationAfterPreload">skip preloading </a>')
//-->
</script>
</center>
</td> 
</tr>
</table>
    ein 10ner wär nice

    mfg O²BoOn

    wenn was nicht funzt schickt mir ne PM oder postet euer Problem
     
  3. 8. November 2005
    sry aber das is kein tut sondern eher n script,
    wenn es ein tut sein soll dann sollte man auch alles genau beschreiben
     
  4. 8. November 2005
    was daran ist nicht ausführlich genug erklärt?
    dann ergänze ich es


    ich finde wer das nich checkt isn noob!
     
  5. 12. November 2005
    tolle einstellung @ Themenstarter.
    Soll tatsächlich leute geben die was lernen wollen und die fangen meistens von 0 an und wenn die dann sowas lesen werden die das höchstens kopieren, einfügen und los gehts... da wird nich viel überlegt.
    darüber solltest du evtl. mal nachdenken.

    mfG

    eYo
     
  6. 16. November 2005
    gut beschrieben hin oder her, es ist ein gutes script, vielen dank
     
  7. 16. November 2005
    hättest das script wenigsten selbst geschrieben dann könnte man drüber hinwegsehn! nur das ich das selbe script vor 2-3 jahren schonma verwendet habe! und du das nur irgendwo kopiert hast find ich billig!

    Dann gibst du das noch als eigenes aus und willstn 10er!


    paah
     
  8. 18. November 2005
    kenne das von ulf-theis.de
     
  9. Video Script

    Videos zum Themenbereich

    * gefundene Videos auf YouTube, anhand der Überschrift.