Ich habe eine einfache Webseite mit Bildern erstellt, aber wenn ein Benutzer es besucht, lädt der Browser die Bilder nacheinander. So sieht der Benutzer zuerst das erste Bild, dann das zweite Bild und so weiter.Wie kann ich eine Webseite vorab laden, um sie anzuzeigen?

Ich möchte stattdessen, dass zuerst ein Laden Gif in der Mitte der Webseite und dann, wenn alle Bilder heruntergeladen werden, zeigen Sie die gesamte Webseite für den Benutzer.

Wie kann ich das tun?

2010-12-31 xRobot

Sie können ein Loader Bild zeigen, indem sie irgendwo im <img> Tag setzen und unter js-Code verwenden, es zu verbergen später, wenn alle Bilder angezeigt werden:

window.onload = function(){ 
    var el = document.getElementById('elementID'); 
    el.style.display = 'none'; 
};

Wo elementID sollte die ID des Laders sein Element/Tag.

Die load Ereignis wird ausgelöst, wenn alle Bilder/Bilder/externe Ressourcen geladen werden, so durch die Zeit, die Ereignis ausgelöst wird, werden alle Bilder geladen sind und wir daher die Ladenachricht/Bild hier verstecken.

Quelle

2010-12-31 17:33:40 Sarfraz

Sie können dies mit JQuery tun. Sagen Sie Ihre Seite sieht wie folgt aus:

<body> 
    <div id='loader'>Loader graphic here</div> 
    <div id='pagecontent' style='display:none'>Rest of page content here</div> 
</body>

Sie eine JQuery-Funktion Seiteninhalt zu zeigen, haben kann, wenn die gesamte Seite geladen wird:

$(document).ready(function() { 
    $(window).load(function() { 
     $('#loader').hide(); 
     $('#pagecontent').show(); 
    }); 
});

Quelle

2010-12-31 17:41:34 Keltex

In diesem Fall, wenn der Benutzer Javascript nicht aktiviert hat, sieht er den div # Seiteninhalt nicht. Recht ? – xRobot

Ist das '$ (document) .ready (function()' 'nicht redundant?' $ (Window) .load' wird ausgelöst, auch wenn es außerhalb des Blocks liegt. –

Sie haben Recht, der 'ready' Griff könnte wahrscheinlich entfernt werden, aber es wird nichts weh tun – Keltex

Edit: Ich aufschieben zu Keltex's answer. Es ist eine viel bessere Lösung. Ich werde meins für die Nachwelt hier lassen (außer ich sollte den Inhalt und meine Antwort vollständig löschen? Ich bin neu hier).

Eine andere Lösung, die in der Vergangenheit ziemlich häufig verwendet wurde, besteht darin, eine Zielseite zu erstellen, die alle Ihre Bilder vorlädt. Wenn das Vorladen abgeschlossen ist, wird es auf die tatsächliche Site umgeleitet. Damit dies funktioniert, müssen Sie die URLs für alle Bilder, die Sie laden mögen, und dann so etwas tun:

# on index.html, our preloader 
<script type='text/javascript'> 
    // add all of your image paths to this array 
    var images = [ 
     '/images/image1.png', 
     '/images/image2.png', 
     '/images/image3.png' 
    ]; 

    for(var i in images) { 
     var img = images[i]; 
     var e = document.createElement('img'); 
     // this will trigger your browser loading the image (and caching it) 
     e.src = img; 
    } 

    // once we get here, we are pretty much done, so redirect to the actual page 
    window.location = '/home.html'; 
</script> 
<body> 
    <h1>Loading....</h1> 
    <img src="loading.gif"/> 
</body>

Quelle

2010-12-31 17:42:12

aaahhh ... die Schönheit der alten Schule ... + 1 !! :) – NoobEditor

HTML

<div id="preloader"> 
    <div id="loading-animation">&nbsp;</div> 
</div>

JAVASCRIPT

<script type="text/javascript"> 
    /* ======== Preloader ======== */ 
    $(window).load(function() { 
     var preloaderDelay = 350, 
       preloaderFadeOutTime = 800; 

     function hidePreloader() { 
      var loadingAnimation = $('#loading-animation'), 
        preloader = $('#preloader'); 
      loadingAnimation.fadeOut(); 
      preloader.delay(preloaderDelay).fadeOut(preloaderFadeOutTime); 
     } 

     hidePreloader(); 
    }); 
</script>

CSS

#preloader { 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    z-index: 9999; 
    position: fixed; 
    background-color: #fff; 
} 

#loading-animation { 
     top: 50%; 
     left: 50%; 
     width: 200px; 
     height: 200px; 
     position: absolute; 
     margin: -100px 0 0 -100px; 
     background: url('loading-animation.gif') center center no-repeat; 
}

Quelle

2013-11-04 03:32:54 Syed

Cr Eate ein Div mit Klassennamen Preloader und legte einen Loader innerhalb dieser div.

Stil der Klasse preloader wie knapp unter

.preloader { 
     position: fixed; 
     top: 0px; 
     left: 0px; 
     width: 100%; 
     height: 100%; 
     background-color: white; 
     /* background-color is would hide the data before loading 
     text-align: center; 
    }

Html

<div class="preloader"> 
    Any loader image 
    </div>

JQuery

 $(window).load(function(){ 
     $('.preloader').fadeOut(); // set duration in brackets 
    });

Eine einfache Seite Loader ist bereit ....

Quelle

2015-04-17 10:33:27 Dark

Wie kann ich eine Webseite vorab laden, um sie anzuzeigen?

Antwort

HTML

JAVASCRIPT

CSS

Verwandte Themen