✔ Preload...ja mal wieder :)

CrushLog · 15. März 2005

Hi,

ok, ich weiss, immer wieder das gleiche leidige Thema Preload Script, aber ich brauch da nochmal eure Hilfe, auch wenn es euch bestimmt zum Hals raushängt

Ich hab hier natürlich auch die Suche benutzt und ein ganz schickes Preload Script gefunden: http://www.ulf-theis.de/tutorials/dreamweaver/javascript/tut_preloader.php

Ich würde nun aber gerne wissen, ob es eine Möglichkeit gibt, dass nach dem Laden der Bilder nicht auf eine andere Datei weitergeleitet werden muss. Sprich ich würde dieses Script gerne auf meiner index Datei einbetten und diese soll dann nach dem Laden auch weiterverwendet werden. Gibt es da eine Möglichkeit? Vielleicht mit Variablenübergabe in irgendeiner Art? Der Rest der Homepage ist komplett in PHP, ich möchte dann aber keine Variable per Browserzeile oder so übergeben lassen...eine Idee wäre auch ein Cookie zu setzen, aber dann wäre ja das Problem, dass der nicht beim Verlassen der Seite gelöscht wird...Fragen über Fragen, weiss einer Rat?

Danke

Ben

Sven Mintel · 15. März 2005

Du müsstest da in checkLoad diese Zeile:

Code:

 location.replace(locationAfterPreload)

...rausnehmen, und dafür eine Anweisung hineintun, welche den Ladebalken versteckt.

CrushLog · 15. März 2005

Ok, aber meine JS Kenntnisse gehen leider nicht im entferntesten soweit :/

//Kannste mir da nich nochmal ein paar mehr Informationen geben? Wäre dir mehr als dankbar

Sven Mintel · 16. März 2005

Ich hab da lieber was Eigenes gemacht... ich find dieses Skript ohnehin nicht sehr empfehlenswert, da dort im IE, falls ein Bild nicht geladen werden kann, alles hängen bleibt.
Der Autor weist zwar drauf hin, dass dies passiert... aber es gibt schliesslich noch andere Gründe für ein nicht ladbares Bild, als ein falsch notierter Pfad.

Hab mal nen anderen gemacht... sieht eigentlich genau so aus, erspart auch die Arbeit, die Bilder aus dem aktuellen Dokument nochmals zu notieren.

Code:

/**
  * was: Image-Preloader
  * von: Sven Mintel
  * für: DOM->Quirks-Mode(nix opera)
  *  am: 16.03.05
  **/     
    
  //Text der erscheinen soll
    strMsg = 'lade Bilder...';
    
    
    
    
    var objRow,
        objTimer,
        arrFlags = [],
        arrPreload =[],
        intLoaded = 0;
        

  //bei Bedarf mehr laden
    function load_more()
    {
        arrCache = [];
        
        for( i = 0; i < arrPreload.length; ++i)
        {
           arrCache.push(new Image());
           arrCache[i].src = arrPreload[i]; 
        }
    }
    
  //Fertig...Seite zeigen
    function show_doc()
    {
        document.getElementById('loader').style.visibility = 'hidden';
        document.getElementsByTagName('body')[0].style.overflow = 'auto';
        load_more();
    }
    
  //Balkenfarbe je nach Status ändern rot-gelb-grün
    function rgb(intPct)
    {
        intG=(intPct<50) ? Math.round(Math.min(255,intPct*5.1 ))          :255;
        intR=(intPct>50) ? Math.round(Math.max(0,255-((intPct-50)*5.1)))  :255;
        return('rgb('+intR+','+intG+',0)');
    }
  
  //Bar erzeugen 
    function init()
    {
        arrImgs = document.images;
        objRow = document.getElementById('loader').rows[0].cells[0].childNodes[1].rows[0];
        objRow.deleteCell(0);
        
        for( i = 0; i < arrImgs.length; ++i)
            {
                objCell = objRow.insertCell(i);
                objCell.className = "loader";
                arrFlags.push(false);
            }
        setTimeout('preloadbar()','10')
    }
    
  //Ladestatus ermitteln
    function preloadbar()
    {
        for( i = 0; i < arrImgs.length; ++i)
            {
                if(!arrFlags[i] && arrImgs[i].complete)
                    {
                        arrFlags[i] = true;
                        intLoaded++;
                    }
                
                for( j = 0; j < intLoaded; ++j)
                    {
                        objRow.cells[j].style.backgroundColor = rgb(parseInt((100*intLoaded)/arrImgs.length),5.1);
                    }
            }
        
        if(intLoaded==arrImgs.length){show_doc();return;}
        
        setTimeout('preloadbar()','10');
    }
  
    
    
    //Bar  und CSS ins Dokument schreiben, etwaige Leerzeichen beim write() entfernen... die kommen von der Boardsoftware, nicht von mir ;)
    if(document.getElementById && !window.opera)
     {
        window.onload=show_doc;
        document.writeln(unescape('%0D%0A%3Cstyle%20type%3D%22text%2Fcss%22%3E%0D%0A%3C%21--%0D%0Abody%7Boverflow%3Ahidden%3Bvisibility%3Ahidden%3Bmargin%3A0%7D%0D%0A%23loader%7Bposition%3Aabsolute%3Btop%3A0%3Bleft%3A0%3Bz-index%3A100%3Bwidth%3A100%25%3Bheight%3A100%25%3B%7D%0D%0A--%3E%0D%0A%3C%2Fstyle%3E%0D%0A'));
        document.writeln(unescape('%0D%0A%3Ctable%20id%3D%22loader%22border%3D%220%22%3E%3Ctr%3E%3Cth%20valign%3D%22middle%22align%3D%22center%22class%3D%22loader%22%3E')+strMsg+unescape('%3Ctable%20class%3D%22loader%22cellpadding%3D%220%22cellspacing%3D%221%22%3E%3Ctr%3E%3Ctd%3E%3C%2Ftd%3E%3C%2Ftr%3E%3C%2Ftable%3E%20%3Ca%20class%3D%22loader%22href%3D%22javascript%3Avoid%28show_doc%28%29%29%22%3Eskip%3C%2Fa%3E%3C%2Fth%3E%3C%2Ftr%3E%3C%2Ftable%3E%0D%0A '));
        document.getElementsByTagName('body')[0].style.visibility='visible';
    }

Eingebunden werden muss das Skript sofort nach dem öffnenden Body-Tag....ob extern oder intern bleibt dir überlassen.

Vor den schliessenden Body-Tag muss noch dies hin:

Code:

<script type="text/javascript">
<!--
    //"Preloaden" initialisieren
            init();

/**
  * weitere Bilder bei Bedarf vorladen nach folgendem Schema:

    arrPreload.push('pfad/zum/bild1.gif');
    arrPreload.push('pfad/zum/bild2.gif');
  
  *
  **/
//-->
</script>

Das Aussehen kannst du per CSS ändern... ich häng das mal alles ran, Erläuterungen stehen mit drinnen.

Preloader-Test

CrushLog · 16. März 2005

Super, ich dank dir, werds gleich mal einbauen und testen!

//Edit
Also irgendwie zeigt er das bei mir an, aber nur ganz kurz...hab aber extra eine grosses Bild mit eingefügt.

//Edit2
Ah ok, es klappt...
Kann man das Script eigentlich auch so realisieren, dass es nur einmal ausgeführt wird?
Vielleicht in Verbindung damit, dass ich die Seite in PHP code und da bei Variablen über die Browser Zeile übergebe...vielleicht also als Ansatz, dass das Script nur ausgeführt wird wenn keine Variablen übergeben werden?

Sven Mintel · 17. März 2005

CrushLog hat gesagt.:
Kann man das Script eigentlich auch so realisieren, dass es nur einmal ausgeführt wird?

z.B.

Code:

if(empty($_SERVER['QUERY_STRING']))
  {
      echo $skriptcode;
  }

würde dies tun. Du könntest da auch auf eine existierende Session prüfen, falls du mit Sessions arbeitest.

tadpole · 7. Juni 2005

Sehr gutes Script. Aber eine Frage hätte ich noch und zwar:

Kann man diesen Preloader auch etwa so wie hier einbauen ?
Bzw. Wie kann ich das Script am einfachsten so implementieren ?

Sven Mintel · 8. Juni 2005

Wenn du den Preloader wie auf der anderen Seite willst, nimm doch gleich den dortigen.
Den Code findest du in der Seite und im eingebundenen preloader.js

der "Einbau" meines Prloaders ist denkbar einfach: Skriptcode in die seite kopieren ...fertig.
(am besten das Skript aus dem Anhang verwenden, die Boardsoftware hat in den geposteten Code ein paar Leerzeichen eingefügt, welche wahrscheinlich stören.)

tadpole · 8. Juni 2005

Oh sry hatte nicht richtig in den Quelltext von der Seite geguckt. ^^

Danke nochmals.

Anwa · 29. Juni 2005

Sven Mintel hat gesagt.:

Ich hab da lieber was Eigenes gemacht... ich find dieses Skript ohnehin nicht sehr empfehlenswert, da dort im IE, falls ein Bild nicht geladen werden kann, alles hängen bleibt.
Der Autor weist zwar drauf hin, dass dies passiert... aber es gibt schliesslich noch andere Gründe für ein nicht ladbares Bild, als ein falsch notierter Pfad.

Hab mal nen anderen gemacht... sieht eigentlich genau so aus, erspart auch die Arbeit, die Bilder aus dem aktuellen Dokument nochmals zu notieren.

Code:

/**
  * was: Image-Preloader
  * von: Sven Mintel
  * für: DOM->Quirks-Mode(nix opera)
  *  am: 16.03.05
  **/     
    
  //Text der erscheinen soll
    strMsg = 'lade Bilder...';
    
    
    
    
    var objRow,
        objTimer,
        arrFlags = [],
        arrPreload =[],
        intLoaded = 0;
        

  //bei Bedarf mehr laden
    function load_more()
    {
        arrCache = [];
        
        for( i = 0; i < arrPreload.length; ++i)
        {
           arrCache.push(new Image());
           arrCache[i].src = arrPreload[i]; 
        }
    }
    
  //Fertig...Seite zeigen
    function show_doc()
    {
        document.getElementById('loader').style.visibility = 'hidden';
        document.getElementsByTagName('body')[0].style.overflow = 'auto';
        load_more();
    }
    
  //Balkenfarbe je nach Status ändern rot-gelb-grün
    function rgb(intPct)
    {
        intG=(intPct<50) ? Math.round(Math.min(255,intPct*5.1 ))          :255;
        intR=(intPct>50) ? Math.round(Math.max(0,255-((intPct-50)*5.1)))  :255;
        return('rgb('+intR+','+intG+',0)');
    }
  
  //Bar erzeugen 
    function init()
    {
        arrImgs = document.images;
        objRow = document.getElementById('loader').rows[0].cells[0].childNodes[1].rows[0];
        objRow.deleteCell(0);
        
        for( i = 0; i < arrImgs.length; ++i)
            {
                objCell = objRow.insertCell(i);
                objCell.className = "loader";
                arrFlags.push(false);
            }
        setTimeout('preloadbar()','10')
    }
    
  //Ladestatus ermitteln
    function preloadbar()
    {
        for( i = 0; i < arrImgs.length; ++i)
            {
                if(!arrFlags[i] && arrImgs[i].complete)
                    {
                        arrFlags[i] = true;
                        intLoaded++;
                    }
                
                for( j = 0; j < intLoaded; ++j)
                    {
                        objRow.cells[j].style.backgroundColor = rgb(parseInt((100*intLoaded)/arrImgs.length),5.1);
                    }
            }
        
        if(intLoaded==arrImgs.length){show_doc();return;}
        
        setTimeout('preloadbar()','10');
    }
  
    
    
    //Bar  und CSS ins Dokument schreiben
    if(document.getElementById && !window.opera)
     {
        window.onload=show_doc;
        document.writeln(unescape('%0D%0A%3Cstyle%20type%3D%22text%2Fcss%22%3E%0D%0A%3C%21--%0D%0Abody%7Boverflow%3Ahidden%3Bvisibility%3Ahidden%3Bmargin%3A0%7D%0D%0A%23loader%7Bposition%3Aabsolute%3Btop%3A0%3Bleft%3A0%3Bz-index%3A100%3Bwidth%3A100%25%3Bheight%3A100%25%3B%7D%0D%0A--%3E%0D%0A%3C%2Fstyle%3E%0D%0A'));
        document.writeln(unescape('%0D%0A%3Ctable%20id%3D%22loader%22border%3D%220%22%3E%3Ctr%3E%3Cth%20valign%3D%22middle%22align%3D%22center%22class%3D%22loader%22%3E')+strMsg+unescape('%3Ctable%20class%3D%22loader%22cellpadding%3D%220%22cellspacing%3D%221%22%3E%3Ctr%3E%3Ctd%3E%3C%2Ftd%3E%3C%2Ftr%3E%3C%2Ftable%3E%20%3Ca%20class%3D%22loader%22href%3D%22javascript%3Avoid%28show_doc%28%29%29%22%3Eskip%3C%2Fa%3E%3C%2Fth%3E%3C%2Ftr%3E%3C%2Ftable%3E%0D%0A '));
        document.getElementsByTagName('body')[0].style.visibility='visible';
    }

Eingebunden werden muss das Skript sofort nach dem öffnenden Body-Tag....ob extern oder intern bleibt dir überlassen.

Vor den schliessenden Body-Tag muss noch dies hin:

Code:

<script type="text/javascript">
<!--
    //"Preloaden" initialisieren
            init();

/**
  * weitere Bilder bei Bedarf vorladen nach folgendem Schema:

    arrPreload.push('pfad/zum/bild1.gif');
    arrPreload.push('pfad/zum/bild2.gif');
  
  *
  **/
//-->
</script>

Das Aussehen kannst du per CSS ändern... ich häng das mal alles ran, Erläuterungen stehen mit drinnen.

Preloader-Test

Hi.
Ich hab mal deinen Preloader probiert. Aber bei mir erscheint er über der Seite und man sieht wie die Bilder geladen werden. Aber ich möchte es eigentlich wie auf deiner Testseite. Man sieht nur den Balken und wie er lädt und dann erst zeigt er die geladene Seite an. Habs so gemacht, wie du schreibst.

Haste da ne Idee woran das liegt?

Thx

✔ Preload...ja mal wieder :)

CrushLog

Erfahrenes Mitglied

Sven Mintel

Mitglied

CrushLog

Erfahrenes Mitglied

Sven Mintel

Mitglied

Anhänge

CrushLog

Erfahrenes Mitglied

Sven Mintel

Mitglied

tadpole

Mitglied

Sven Mintel

Mitglied

tadpole

Mitglied

Anwa

Grünschnabel

Neue Beiträge