✔ Ladebildschirm für die Website

Eisbergsalat666

Eisbergsalat666

Mitglied
Hallo, ich mal wieder :)
ich bin mit meinem Projekt fast am Ende. Ich habe vor meiner Seite einen Ladebildschirm zu spendieren. Den Code dazu habe ich von nem Bekannten schreiben lassen (für Javascript bin ich einfach zu "dyskalkulatisch" veranlagt) und sieht so aus
Code: 
window.onload = function(){
    var imageUrls = new Array(
        'images/IMG_0017-stk_00.jpg',
        'images/IMG_0017-stk_01.jpg',
        // hier sollen die Bilder rein die beim Beenden des Script fertig geladen sein sollen, der Rest kommt danach von allein
    );
    var imagesLoaded = 0;
    for(var i = 0, l = imageUrls.length; i<l;++i){
        imageObjects[i] = new Image();
        imageObjects[i].onload = function(){
            imagesLoaded++;
            if(imagesLoaded == imageUrls.length){
                imagesReady(); //Funktion, die ausgeführt wird, wenn alle obengenannten Bilder geladen sind.
            }
        }
        imageObjects[i].src = imageUrls[i];
    }
};// JavaScript Document

als Ladebildschirm habe ich mir folgendes CSS gedacht
CSS: 
.blender {
    background-color: #FFFFFF;
    width: 100%;
    position: fixed;
    z-index: 75;
}
.blender .img {
    position: fixed;
    z-index: 76;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

Jetzt zu meinen Fragen. Ich lade das Script ja im Header meiner index.html und den Blender-Container direkt nach dem body-tag. Mach ich das so? Wenn ja, warum funktioniert das nicht.
CSS: 
<div class="blender"><img src="images/kommt_gleich.gif" alt="" class="blender .img"></div>

Da steht ich mal wieder auf dem Schlauch ^^
 
stimmt :p

aber dennoch...ich hab noch immer das problem das die seite weiß bleibt. ich weiß nicht wo ich der funktion sage das das 100% x 100% große DIV verschwinden kann. jetzt ist meine Site fortwährend weiß...auch nachdem sie geladen ist.
 
so....ich hab die css nochmal angepasst ... auch da war ja nur murx

CSS: 
.blender {
    background-color: #e9e9e9;
    align-content: center;
    width: 100%;
    height: 100%;
    margin: auto;
    position: fixed;
    z-index: 75;
}
.blender .img {
    position: absolute;
    left: 40%;
    top: 40%;
    width: 350px;
    height: 100px;
    display: block;
    margin-left: auto;
    margin-right: auto;
}
 
Eisbergsalat666 hat gesagt.:
Den Code dazu habe ich von nem Bekannten schreiben lassen
Zum Vergrößern anklicken....
Eisbergsalat666 hat gesagt.:
aber dennoch...ich hab noch immer das problem das die seite weiß bleibt. ich weiß nicht wo ich der funktion sage das das 100% x 100% große DIV verschwinden kann. jetzt ist meine Site fortwährend weiß...auch nachdem sie geladen ist.
Zum Vergrößern anklicken....
Deine nachgeschobene Frage in Post #2 ist mir vorhin entgangen... Darum erlaub mir bitte eine Gegenfrage.

Wenn das hier dein Hauptanliegen ist, warum wendest du dich nicht direkt an den Bekannten, sondern an ein (CSS!)Forum?
 
Zuletzt bearbeitet:
Gegenfrage gestattet. Weil ich den "Bekannten"...nun, wie soll ich das sagen...eigentlich gar nicht kenne und er mir die Hilfe verneint hat. Seine Aussage war: "schau dir nochmal intensiv die JS Grundlagen an." Das hilft mir leider nicht weiter auf die schnelle. ich schau mir auf alle fälle die js grundlagen an, aber das kann ich jetzt einfach nicht...ich habe einen job und ich habe mir die grundlagen in vllt ein zwei monaten halbwegs verinnerlicht (ich weiß, das ist sehr hochgegriffen)....
ich mag einfach bald zu einem ende kommen um dann in ruhe zu lernen. ich wurde mit diesem projekt ins kalte wasser geschmissen, hatte Wissen von null komma eins...und die Lust, bzw. der Wille zum weiterlernen ist auf alle Fälle geweckt! ...ich bin der Meinung das ich auf die Art und Weise wie ich in das Gebiet gestolpert bin, mir sehr gut getan hat...für den Anfang.
Aber: erst muss ich das iwie fertigbekommen. Dann lern ich wie es sich für Frauen meines Typs gehört!


PS: Soll ich die Frage im JS forum nochmal stellen? Kann ich gerne machen...dachte mir nur das mir hier vllt auch geholfen werden kann...weiß, doof gedacht

PPS: Hab die Frage nun auch im JS-Forum gestellt
 
Zuletzt bearbeitet:
Da mein Eintrag hierher kopiert wurde (hatte das falsche Forum erwischt), fass ich hier nochmal kurz zusammen:
JS
Java: 
// JavaScript Ladebilschirm
window.onload = function(){
    var imageUrls = new Array(
        'images/header-background.jpg',
        'images/portrait1.png',
        'imgaes/Wolf_lightgrey.png',
        'images/Wolf_white.png',
        'images/portrait3.png'
        // Bilder die beim Beenden des Script fertig geladen sein sollen
    );
    var imagesLoaded = 0;
    for(var i = 0, l = imageUrls.length; i<l;++i){
        imageObjects[i] = new Image();
        imageObjects[i].onload = function(){
            imagesLoaded++;
            if(imagesLoaded == imageUrls.length){
                imagesReady(display="none"); //Funktion, die ausgeführt wird, wenn alle obengenannten Bilder geladen sind.
            }
        }
        imageObjects[i].src = imageUrls[i];
    }
};
CSS
Code: 
.blender {
    background-color: #e9e9e9;
    width: 100%;
    height: 100%;
    margin: auto;
    position: fixed;
    z-index: 75;
}
.blender .img {
    position: absolute;
    left: 40%;
    top: 10%;
    width: 350px;
    height: 100px;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

Mein Problem ist folgendes: Wie bekomm ich den Container wieder weg nachdem die gewünschten Bilder geladen sind? Ich bekomme derzeit den Ladebildschirm auch nach fertig laden der Seite noch zu sehen. Eigentlich sollte, so mein Denkansatz " imagesReady(display="none") " den Bildschirm wieder frei geben.
Warum tut es das nicht? Was muss ich ändern? Muss ich etwas in meiner CSS oder html ergänzen ?

Danke für Rat und Tat :)
 
Zuletzt bearbeitet:
1. Gib deinem blender eine ID
HTML: 
<div id="blender"><img src="images/kommt_gleich.gif" alt="" class="blender img"></div>
2. An der Stelle wo alle Bilder geladen sind gibst du blender einfach ein display=none
Javascript: 
// JavaScript Ladebilschirm
window.onload = function(){
    var imageUrls = new Array(
        'images/header-background.jpg',
        'images/portrait1.png',
        'imgaes/Wolf_lightgrey.png',
        'images/Wolf_white.png',
        'images/portrait3.png'
        // Bilder die beim Beenden des Script fertig geladen sein sollen
    );
    var imagesLoaded = 0;
    for(var i = 0, l = imageUrls.length; i<l;++i){
        imageObjects[i] = new Image();
        imageObjects[i].onload = function(){
            imagesLoaded++;
            if(imagesLoaded == imageUrls.length){
                document.getElementById("blender").style.display="none";
                //Funktion, die ausgeführt wird, wenn alle obengenannten Bilder geladen sind.
            }
        }
        imageObjects[i].src = imageUrls[i];
    }
};
 
Hey jeipack,
erstmal danke für deine Hilfe. Aber leider hilft auch das nichts. Wenn ich richtig liege bekommt das Elememt im CSS statt des . eine Raute ... also statt
Code: 
.blender {
    background-color: #e9e9e9;
    ...
}
.blender .img {
    position: absolute;
    ...
}
muss es so aussehen
Code: 
#blender {
    background-color: #e9e9e9;
    ...
}
#blender .img {
    position: absolute;
    ...
}
Richtig?

jeipack hat gesagt.:
<div id="blender"><img src="images/kommt_gleich.gif" alt="" class="blender img"></div>
Zum Vergrößern anklicken....
bleibt auch wie gehabt mit einem id-selektor statt des klassenselektors.

Dann bleibt die Seite allerdings noch immer im Ladebildschirm hängen.
www.eisbergsalat666.bplaced.net
 
Zuletzt bearbeitet:
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück