Script Verladeauftrag in JS/CSS (mit schluck als Build-System)

ich eine HTML-Datei haben, testLoader.html:Script Verladeauftrag in JS/CSS (mit schluck als Build-System)

<head> 
    <style> 
    .loader { 
     position: fixed; 
     left: 0px; 
     top: 0px; 
     width: 100%; 
     height: 100%; 
     z-index: 9999; 
     background: url('optier-spinner.gif') 50% 50% no-repeat #ccc; 
    } 
    </style> 

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.js"></script> 
    <script src="http://underscorejs.org/underscore.js"></script> 
    <script src="head.load.js"></script>

usw.

Mein Ziel ist es, ein "Laden" Bild zu haben, (animiertes GIF), während JS-Skripte geladen werden. Problem ist das Bild in der url() Tag in der <style> Abschnitt wird nur abgerufen, nachdem JS-Dateien geladen sind, also keinen Effekt für die Animation.

Netzdiagramm des Ladens:

Wie Sie sehen können, werden die Scripts geladen und erst nach ihnen das GIF-Bild. Ich versuchte mit Skriptlader wie head.js und es funktioniert, aber ich benutze Schluck und die JS-Dateien des Projekts werden während des Build-Prozesses injiziert (und die Dateien ändern sich von Entwicklung zu Produktion), so ist Skriptlader keine Option soweit Ich kenne.

Wie kann ich das Bild laden und präsentiert werden, während die anderen Dateien geladen sind?

Quelle

2016-05-01 nadavelyashiv

bitte markieren Sie eine Antwort als akzeptiert, wenn es Ihre Frage – marvinhagemeister

Der Grund dafür ist, dass Sie sowohl das css als auch das javascript in das Dokument <head> laden. <script> -Tags blockieren, dh der Browser wartet, bis das Herunterladen und Parsen abgeschlossen ist, bevor die Seite weiter gerendert wird.

Bilder, die in CSS definiert sind, werden nur heruntergeladen, wenn der Selektor gerendert wird, der nach dem Laden der Skripte angezeigt wird. So halten die Gif-Ladungen.

Verschieben Sie alle <script> -Tags kurz vor dem Schließen </body> -tag, um sicherzustellen, dass sie den Browser nicht blockieren und zuletzt ausgeführt werden.

Quelle

2016-05-01 13:37:55 marvinhagemeister

richtig löst, danke. – nadavelyashiv

können Sie die Aufladungstyp gif im HTML setzen, dann in Ihrem js Skript etwas wie folgt aus:

$(window).load(function() {  
     $("#gif_id").fadeOut("slow");  
    }); 
    $(document).ready(function() { 
     // other code 
    });

Das Load-Ereignis wird einem Element gesendet, wenn es und alle Unterelemente haben gewesen komplett geladen

Nachdem alle Skripte geladen sind, wird das GIF-Symbol entfernt.

Quelle

2016-05-01 13:39:53

Script Verladeauftrag in JS/CSS (mit schluck als Build-System)

Antwort

Verwandte Themen