✔ Preload...ja mal wieder :)

mh mein erster post & frage und die lösung ist garantiert so leicht >_>
ich gehe mal das beispiel durch, dass ich eine news-seite mit php erstellt hab und jeden tag ein paar news mehr in die datenbank gespielt werden. neben dem normalen text werden auch bilder mit abgespeichert, welche auf dem server dann im ordner media/newsbilder (beispiel..) liegen. wie könnte der preloader denn aussehen, der mir dann diese dateien auslesen würde undzwar ohne das ich irgendwas in einer datei ergänzen müsste (sprich in ein array die dateien schreiben, was bei sagen wir mal 500 bildern ein ganzer haufen wäre..)

ob es eine möglichkeit gibt per PHP eine schleife zu erstellen und somit die bilder in dem array auto-generieren zu lassen? das hab ich mir auch schon durchn kopf gehn lassen aber ich wüsste nicht wie ich das umsetzen sollte .. selbst mit bissl erfahrung in beiden scriptsprachen steh ich jetzt pleite da >_>

danke für hilfe
 
Aber ist es möglich, zum Beispiel ein PopUp mit dem Hochladen, oder vor dem hochladen zu öffnen, das so lange offen bleibt und einen Status anzeigt, bis die Datei übergeben wurde, bzw. das ausführende Script abgearbeitet ist?
 
Es gibt im PHP-Board unzählige Themen zum Auslesen von Verzeichnisinhalt...ebenso gibt es dort und im JS-Board reihenweise Themen zur Problematik Bereitstellen von PHP-Daten für Javascript :google:
 
Da ich's grad noch aus einem anderen Beitrag in der Zwischenablage habe (ja, so oft wird hier danach gefragt): Hier der Link zum MySQL-Abfrage-Thread. Entschuldigt bitte das "Fahr zur Hölle" am Ende, der Type hatte mich wirklich etwas genervt.

Und hier der Link, wie man Verzeichnisse mit PHP auslesen kann.

P.S. @all
Forensuche benutzen lohnt sich und googlen ist auch nicht dumm, also macht es aller bevor ihr fragt und lest mal den Thread ganz oben hier im JS-Forum!
 
Zuletzt bearbeitet:
tadpole hat gesagt.:
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 ?
Zum Vergrößern anklicken....

Den Preloader habe ich ordentlich eingefügt und so weiter, aber leider funktioniert er nicht im IE, obwohl er auf den anderen Seiten ( http://www.4impressions.net und http://www.dynamicdrive.com/dynamicindex4/preloadit.htm ) ist auch im IE funktioniert. Woran liegt es ?

Seite ist: http://www.netdisein.com
 
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
Zum Vergrößern anklicken....

Also ich hab mal dein Preloader Script runtergeladen, doch irgendwie bleibt die Seite leer

Was mache ich falsch ?

http://www.technikcentral.de/preload.htm

Hatte aber auch nix gefunden wo ich angeben kann auf welche Seite er soll, wenn er fertig ist

Vielen Dank !

Natheedo
 
Natheedo hat gesagt.:
Hatte aber auch nix gefunden wo ich angeben kann auf welche Seite er soll, wenn er fertig ist
Zum Vergrößern anklicken....

Das dürfte daran liegen, dass dort auch nichts ist, wo du dies angeben könntest:)

Man bleibt auf der aktuellen Seite...sind alle Bilder geladen, wird diese angezeigt und der Balken versteckt. Dass bei dir überhaupt nichts passiert, liegt daran, dass du Sachen im Skript geändert hast, die du nicht hättest ändern sollen.
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück