Loader-Image anzeigen, bis das Hintergrundbild vollständig geladen ist

Ich versuche, ein Loader für ein Hintergrundbild zu implementieren, bis das gesamte Bild mit jquery vollständig geladen ist. Ich habe die verschiedenen Methoden versucht, dies zu tun. Da das Bild im CSS spezifiziert ist, konnte ich nicht die genaue Bild-ID oder -Klasse angeben. Schließlich mache ich das,Loader-Image anzeigen, bis das Hintergrundbild vollständig geladen ist

Aber dies geschieht, wenn das Fenster geladen ist. Ich wollte es passieren, bis das Bild vollständig geladen ist. Und das Hintergrundbild kommt unter dem folgenden Abschnitt

<div class="loader"></div> 
    <div class="test_banner services_banner"> 
</div>

Es wäre toll, wenn jemand eine helfende Hand geben, diesen Fall zu verwalten. Danke im Voraus.

Quelle

2016-09-29 Muneer Muhammed

Verwenden Sie eines der "Lazyload" -Plugins. Keine Notwendigkeit, das Rad neu zu erfinden. – Aziz

Bitte posten Sie ein vollständiges Beispiel (z. B. eine jsfiddle) mit dem Markup und dem CSS. Kann mir wirklich nicht vorstellen, wie es aussieht und wie es aussehen soll. – Connum

Greifen Sie das Hintergrundbild von CSS, erstellen Sie ein neues Bild mit dem gleichen Dateinamen, und wenn das geladen ist, entfernen Sie den Loader usw. – adeneo

Vielleicht könnten Sie ein mehr Hintergrund-Bild

Beispiel verwenden:

div { 
 
    height:90vh; 
 
    width:90vw; 
 
    background:url(http://lorempixel.com/1200/800/nature/) center, 
 
    url(http://www.jqueryscript.net/demo/Simple-Customizable-jQuery-Loader-Plugin-Center-Loader/img/loader1.gif) center center no-repeat ;/* this works once/untill image has been loaded */

<div></div>

Der Gif Hintergrund hier bleibt aber behi gemalt, d die große Bild. Es wird angezeigt, solange das große Bild nicht geladen ist ...

Quelle

2016-09-29 14:27:40

bemerkte, ich greife ein Loader gif von einem jquery Plugin on line .... –

Vielen Dank für Ihre Hilfe . Ich habe deinen Vorschlag ausprobiert. Aber während dies folgt, zeigt es Schritt für Schritt das Laden des Bildes. Was ich wollte, ist das Hauptbild erst nach dem vollständigen Laden zu zeigen. Genau wie den Lader durch das Bild ersetzen. –

Loader-Image anzeigen, bis das Hintergrundbild vollständig geladen ist

Antwort

Verwandte Themen