Ergebnis 1 bis 3 von 3

Thema: Preloader für seite

  1. #1
    HTML Newbie
    Registriert seit
    30.06.2005
    Ort
    Köln
    Beiträge
    4
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard Preloader für seite

    hi leute habe ne seite mit tabellen und so erstellt und da ich es scheisse finde das man sieht wie sich die einzelnen bilder aufbauen habe ich mir gedacht kann mir vielleicht einer/ oder eine erklären wie ich nen preloader einbaue =)

    danke ^^
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!

  2. #2
    Großmeister(in)
    Registriert seit
    06.06.2005
    Beiträge
    545
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    Folgenden Code speicherst du einfach in die Datei "preload.js"!

    Code:
    var locationAfterPreload = "/HTML Dateien/Bilder.html"
    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 &#40;i = 0; i < yourImages.length; i++&#41; &#123;
    preImages&#91;i&#93; = new Image&#40;&#41;
    preImages&#91;i&#93;.src = yourImages&#91;i&#93;
    &#125;
    for &#40;i = 0; i < preImages.length; i++&#41; &#123;
    loaded&#91;i&#93; = false
    &#125;
    checkLoad&#40;&#41;
    &#125;
    function checkLoad&#40;&#41; &#123;
    if &#40;currCount == preImages.length&#41; &#123;
    location.replace&#40;locationAfterPreload&#41;
    return
    &#125;
    for &#40;i = 0; i <= preImages.length; i++&#41; &#123;
    if &#40;loaded&#91;i&#93; == false && preImages&#91;i&#93;.complete&#41; &#123;
    loaded&#91;i&#93; = true
    eval&#40;"document.img" + currCount + ".src=dots&#91;1&#93;.src"&#41;
    currCount++
    &#125;
    &#125;
    timerID = setTimeout&#40;"checkLoad&#40;&#41;",10&#41;
    &#125;
    Modifikationen des Preloaders:

    - var locationAfterPreload = "": Hier die Seite angeben auf die der Preloader nach Beendung des Ladevorgangs weiterleiten soll.

    - 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.

    - 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 dein 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 dein Image-Verzeichnis ablegen und den Pfad hier entsprechend angeben.


    Nun eine HTML Datei namens "preload.html" erstellen und folgenden Code eingeben:

    Code:
    <html>
    <head>
    <script language="JavaScript" src="preload.js" type="text/javascript"></script>
    </head>
    <body>
    <table width="300" border="0" cellspacing="0" cellpadding="0">
    <tr>
    <td width="300" height="75" align="center" bgcolor="#FFFFFF">
    <center>
    preloading images, please wait...
    
    
    <font color="#000000">0%</font>
    <script language="JavaScript1.1">
    <!--
    if &#40;document.images&#41; &#123;
    var preloadBar = ''
    for &#40;i = 0; i < yourImages.length-1; i++&#41; &#123;
    preloadBar += '[img]' + dots&#91;0&#93;.src + '[/img]'
    &#125;
    preloadBar += '[img]' + dots&#91;0&#93;.src + '[/img]'
    document.write&#40;preloadBar&#41;
    loadImages&#40;&#41;
    &#125;
    document.write&#40;'<font color="#000000"> 100%</font>
    
    skip preloading '&#41;
    //-->
    </script>
    </center>
    </td>
    </tr>
    </table>
    </body>
    Die HTML Datei kannst du natürlich nach deinen Wünschen umgestalten!

  3. #3
    Fortgeschrittene/r
    Registriert seit
    01.06.2005
    Ort
    hier ^^
    Beiträge
    170
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    Code:
    <?
    $ordner = "images"; // hier din bilderordner mit den bildern die vorgeladen werden sollen
    $handle = opendir&#40;$ordner&#41;;
    while &#40;$file = readdir &#40;$handle&#41;&#41; &#123;
        if&#40;$file != "." && $file != ".." && $file != "thumbs.db"&#41; &#123;
                $assi .= "'$ordner/$file' ";
    			$assi3 = chop&#40;$assi&#41;;
    			$assi4 = str_replace&#40;" ", ", ", $assi3&#41;;
        &#125;
    &#125;
    closedir&#40;$handle&#41;;
    ?>
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http&#58;//www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title>preloading Images...</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <?
    $assi2 = '
    <script language="JavaScript1.2">
    <!-- begin hiding
    
    startingColor = new Array&#40;&#41; // <-- Do not modify!
    endingColor = new Array&#40;&#41; // <-- Do not modify!
    
    // YOU MAY MODIFY THE FOLLOWING&#58;
    var yourImages = new Array&#40;'.$assi4.'&#41; // Fill this array with the images you wish to preload
    var locationAfterPreload = "index1.htm" // The script will redirect here when the preloading finishes *successfully*
    var preloadbarWidth = 450 // The length of the preload bar. Should be greater than total amount of images you want to preload!
    var preloadbarHeight = 10 // The height of the gradient/preload bar
    var backgroundOfGradient = "#DDDDDD" // Default color while the preload bar is "filling up"
    
    // Color the preloadbar is starting with - enter 1st, 3rd and 5th numbers/letters of color code
    startingColor&#91;0&#93; = "A" 
    startingColor&#91;1&#93; = "3"
    startingColor&#91;2&#93; = "3"
    
    // Color the preloadbar is going to end up with - enter the 1st, 3rd and 5th numbers/letters of color code
    endingColor&#91;0&#93; = "5"
    endingColor&#91;1&#93; = "A"
    endingColor&#91;2&#93; = "3"
    
    // FOR TROUBLESHOOTING&#58;
    var gap = 8 // PLAY AROUND WITH THIS SETTING IF YOU GET A JAVASCRIPT ERROR!!! 2 is the minumum value!!!
    
    
    // DO NOT MODIFY ANYTHING BEYOND THIS POINT!!!
    
    if &#40;!document.all&#41; location.replace&#40;locationAfterPreload&#41;
    var a = 10, b = 11, c = 12, d = 13, e = 14, f=15, i, j, ones = new Array&#40;&#41;, sixteens = new Array&#40;&#41;, diff = new Array&#40;&#41;;
    var convert = new Array&#40;"0","1","2","3","4","5","6","7","8","9","a","b","c","d","e","f"&#41;, imgLen = yourImages.length;
    var loaded = new Array&#40;&#41;, preImages = new Array&#40;&#41;, currCount = 0, pending = 0, h = 0, hilite = new Array&#40;&#41;, cover = new Array&#40;&#41;;
    var num = Math.floor&#40;preloadbarWidth/gap&#41;;
    for &#40;i = 0; i < 3; i++&#41; &#123;
    	startingColor&#91;i&#93; = startingColor&#91;i&#93;.toLowerCase&#40;&#41;;
    	endingColor&#91;i&#93; = endingColor&#91;i&#93;.toLowerCase&#40;&#41;;
    	startingColor&#91;i&#93; = eval&#40;startingColor&#91;i&#93;&#41;;
    	endingColor&#91;i&#93; = eval&#40;endingColor&#91;i&#93;&#41;;
    	diff&#91;i&#93; = &#40;endingColor&#91;i&#93;-startingColor&#91;i&#93;&#41;/num;
    	ones&#91;i&#93; = Math.floor&#40;diff&#91;i&#93;&#41;;
    	sixteens&#91;i&#93; = Math.round&#40;&#40;diff&#91;i&#93; - ones&#91;i&#93;&#41;*15&#41;;
    &#125;
    endingColor&#91;0&#93; = 0;
    endingColor&#91;1&#93; = 0;
    endingColor&#91;2&#93; = 0;
    i = 0, j = 0;
    while &#40;i <= num&#41; &#123;
    	hilite&#91;i&#93; = "#";
    	while &#40;j < 3&#41; &#123;
    		hilite&#91;i&#93; += convert&#91;startingColor&#91;j&#93;&#93;;
    		hilite&#91;i&#93; += convert&#91;endingColor&#91;j&#93;&#93;;
    		startingColor&#91;j&#93; += ones&#91;j&#93;;
    		endingColor&#91;j&#93; += sixteens&#91;j&#93;;
    		if &#40;endingColor&#91;j&#93; > 15&#41; &#123;
    			endingColor&#91;j&#93; -= 15;
    			startingColor&#91;j&#93;++;
    		&#125;
    		j++;
    	&#125;
    	j = 0;
    	i++;
    &#125;
    function loadImages&#40;&#41; &#123;
    	for &#40;i = 0; i < imgLen; i++&#41; &#123;
    		preImages&#91;i&#93; = new Image&#40;&#41;;
    		preImages&#91;i&#93;.src = yourImages&#91;i&#93;;
    		loaded&#91;i&#93; = 0;
    		cover&#91;i&#93; = Math.floor&#40;num/imgLen&#41;*&#40;i+1&#41;
    	&#125;
    	cover&#91;cover.length-1&#93; += num%imgLen
    	checkLoad&#40;&#41;;
    &#125;
    function checkLoad&#40;&#41; &#123;
    	if &#40;pending&#41; &#123; changeto&#40;&#41;; return &#125;
    	if &#40;currCount == imgLen&#41; &#123; location.replace&#40;locationAfterPreload&#41;; return &#125;
    	for &#40;i = 0; i < imgLen; i++&#41; &#123;
    		if &#40;!loaded&#91;i&#93; && preImages&#91;i&#93;.complete&#41; &#123;
    			loaded&#91;i&#93; = 1; pending++; currCount++;
    			checkLoad&#40;&#41;;
    			return;
    		&#125;
    	&#125;
    	setTimeout&#40;"checkLoad&#40;&#41;",10&#41;;
    &#125;
    function changeto&#40;&#41; &#123;
    	if &#40;h+1 > cover&#91;currCount-1&#93;&#41; &#123;
    		var percent = Math.round&#40;100/imgLen&#41;*currCount;
    		if &#40;percent > 100&#41; while &#40;percent != 100&#41; percent--;
    		if &#40;currCount == imgLen && percent < 100&#41; percent = 100;
    		defaultStatus = "Lädt Bild " + currCount + " von " + imgLen + " Bildern &#91;" + percent + "%&#93;.";
    		pending--;
    		checkLoad&#40;&#41;;
    		return;
    	&#125;
    	eval&#40;"document.all.cell" + &#40;h+1&#41; + ".style.backgroundColor = hilite&#91;h&#93;"&#41;;;
    	h++;
    	setTimeout&#40;"changeto&#40;&#41;",1&#41;;
    &#125;
    defaultStatus = "Lädt Bild 0 von " + imgLen + " Bildern &#91;0%&#93;."
    // end hiding -->
    </script>';
    
    echo $assi2;
    ?>
    </head>
    <body bgcolor="#EEEEEE">
    <table width="100%" cellpadding="0" cellspacing="0">
    <tr>
    <td align="center">
    <font face="Verdana, Arial, Helvetica" size="2" color="#000000"><center>Bilder vorladen ...</center>
    
    
    <script language="JavaScript1.2">
    <!-- beging hiding
    document.write&#40;'<table border="0" cellpadding="0" cellspacing="0" width="' + preloadbarWidth + '"><tr height="' + preloadbarHeight + '" bgcolor="' + backgroundOfGradient + '">'&#41;;
    for &#40;i = 0; i < num; i++&#41; &#123;
    	document.write&#40;'<td width="' + gap + '" id="cell' + &#40;i+1&#41; + '"></td>'&#41;;
    &#125;
    document.write&#40;'</tr></table>'&#41;;
    document.write&#40;'
    
    <small>Vorladen überspringen</small></p></font>'&#41;
    loadImages&#40;&#41;;
    // end hiding -->
    </script>
    </td>
    </tr>
    </table>
    
    </body>
    </html>

Ähnliche Themen

  1. problem mit preloader
    Von zee im Forum Flash Forum
    Antworten: 0
    Letzter Beitrag: 21.11.2006, 17:49
  2. Preloader
    Von Gaudin im Forum Flash Forum
    Antworten: 1
    Letzter Beitrag: 26.02.2006, 14:25
  3. Fragen zu Preloader
    Von Bowser im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 10
    Letzter Beitrag: 22.08.2005, 19:12
  4. preloader?!
    Von dakuba123 im Forum Flash Forum
    Antworten: 0
    Letzter Beitrag: 25.09.2004, 21:56
  5. preloader problem
    Von wernerdeluxe im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 0
    Letzter Beitrag: 29.08.2004, 18:29

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •