Frage

Ich arbeite auf einer Website, die eine ganze Reihe von mp3s und Bilder enthält, und ich möchte ein Laden gif, während alle Inhalte Lasten anzuzeigen.

Ich habe keine Ahnung, wie dies zu erreichen, aber ich habe das animierte gif ich verwenden möchte.

Irgendwelche Vorschläge?

War es hilfreich?

Lösung

Normalerweise Websites, die dies tun, indem Inhalte über Ajax Laden und Hören auf das readystatechanged Ereignis das DOM mit einer Lade GIF oder den Inhalt zu aktualisieren.

Wie laden Sie derzeit Ihre Inhalte?

Der Code wäre ähnlich wie diese:

function load(url) {
    // display loading image here...
    document.getElementById('loadingImg').visible = true;
    // request your data...
    var req = new XMLHttpRequest();
    req.open("POST", url, true);

    req.onreadystatechange = function () {
        if (req.readyState == 4 && req.status == 200) {
            // content is loaded...hide the gif and display the content...
            if (req.responseText) {
                document.getElementById('content').innerHTML = req.responseText;
                document.getElementById('loadingImg').visible = false;
            }
        }
    };
    request.send(vars);
}

Es gibt viele 3rd-Party-JavaScript-Bibliotheken, die das Leben einfacher machen können, aber die oben ist wirklich alles, was Sie brauchen.

Andere Tipps

Sie sagten, Sie nicht diese in AJAX zu tun haben wollen. Während AJAX groß dafür ist, gibt es eine Möglichkeit, ein DIV zu zeigen, während für den gesamten <body> warten zu laden. Es geht in etwa so:

<html>
  <head>
    <style media="screen" type="text/css">
      .layer1_class { position: absolute; z-index: 1; top: 100px; left: 0px; visibility: visible; }
      .layer2_class { position: absolute; z-index: 2; top: 10px; left: 10px; visibility: hidden }
    </style>
    <script>
      function downLoad(){
        if (document.all){
            document.all["layer1"].style.visibility="hidden";
            document.all["layer2"].style.visibility="visible";
        } else if (document.getElementById){
            node = document.getElementById("layer1").style.visibility='hidden';
            node = document.getElementById("layer2").style.visibility='visible';
        }
      }
    </script>
  </head>
  <body onload="downLoad()">
    <div id="layer1" class="layer1_class">
      <table width="100%">
        <tr>
          <td align="center"><strong><em>Please wait while this page is loading...</em></strong></p></td>
        </tr>
      </table>
    </div>
    <div id="layer2" class="layer2_class">
        <script type="text/javascript">
                alert('Just holding things up here.  While you are reading this, the body of the page is not loading and the onload event is being delayed');
        </script>
        Final content.      
    </div>
  </body>
</html>

Das Onload-Ereignis wird nicht ausgelöst, bis alle der Seite geladen werden. So ist der Layer2 <DIV> wird nicht angezeigt, bis die Seite vollständig geladen ist, nach der onload anspringt.

Wie wäre es mit jQuery? Eine einfache ...

$(window).load(function() {      //Do the code in the {}s when the window has loaded 
  $("#loader").fadeOut("fast");  //Fade out the #loader div
});

Und die HTML ...

<div id="loader"></div>

Und CSS ...

#loader {
      width: 100%;
      height: 100%;
      background-color: white;
      margin: 0;
}

Dann in Ihrem Lader div würden Sie die GIF setzen und jeden Text, den Sie wollten, und es wird ausgeblendet, sobald die Seite geladen wird.

Zuerst stellte eine Lade Bild in einem div auf. Als nächstes kommt das div-Element. Dann setzen, eine Funktion, die die CSS bearbeitet die Sichtbarkeit zu machen „versteckt“. Jetzt, in den <body>, legen Sie die onload des Funktionsnamen.

#Pure CSS-Methode

  

Setzen Sie diese an der Spitze des Codes (vor Header-Tag)

<style> .loader {
  position: fixed;
  background-color: #FFF;
  opacity: 1;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 10;
}
</style>
<div class="loader">
  Your Content For Load Screen
</div>

  

Und diese unten nach allen anderen Code (außer / html-Tag)

<style>
.loader {
    -webkit-animation: load-out 1s;
    animation: load-out 1s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}

@-webkit-keyframes load-out {
    from {
        top: 0;
        opacity: 1;
    }

    to {
        top: 100%;
        opacity: 0;
    }
}

@keyframes load-out {
    from {
        top: 0;
        opacity: 1;
    }

    to {
        top: 100%;
        opacity: 0;
    }
}
</style>

  
    

Das funktioniert immer für mich 100% der Zeit

  

Es ist eigentlich eine ziemlich einfache Möglichkeit, dies zu tun. Der Code sollte so etwas wie:

<script type="test/javascript">

    function showcontent(x){

      if(window.XMLHttpRequest) {
        xmlhttp = new XMLHttpRequest();
      } else {
        xmlhttp = new ActiveXObject('Microsoft.XMLHTTP');
      }

      xmlhttp.onreadystatechange = function() {
        if(xmlhttp.readyState == 1) {
            document.getElementById('content').innerHTML = "<img src='loading.gif' />";
        }
        if(xmlhttp.readyState == 4 && xmlhttp.status == 200) {
          document.getElementById('content').innerHTML = xmlhttp.responseText;
        } 
      }

      xmlhttp.open('POST', x+'.html', true);
      xmlhttp.setRequestHeader('Content-type','application/x-www-form-urlencoded');
      xmlhttp.send(null);

    }

Und im HTML:

<body onload="showcontent(main)"> <!-- onload optional -->
<div id="content"><img src="loading.gif"></div> <!-- leave img out if not onload -->
</body>

Ich habe so etwas auf meiner Seite und es funktioniert super.

Sie können <progress> Element in HTML5 verwenden. Siehe diese Seite für Quellcode und Live-Demo. http://purpledesign.in/blog/super-cool-loading-bar- html5 /

Hier ist der Fortschritt Element ...

<progress id="progressbar" value="20" max="100"></progress>

Dies wird den Ladewert von 20 Start hat natürlich nur das Element wird nicht ausreichen. Sie müssen es als das Skript lädt zu bewegen. Dafür brauchen wir JQuery. Hier ist ein einfacher JQuery-Skript, das den Fortschritt von 0 bis 100 beginnt und etwas tut, in definierten Zeitfenstern.

<script>
        $(document).ready(function() {
         if(!Modernizr.meter){
         alert('Sorry your brower does not support HTML5 progress bar');
         } else {
         var progressbar = $('#progressbar'),
         max = progressbar.attr('max'),
         time = (1000/max)*10, 
         value = progressbar.val();
        var loading = function() {
        value += 1;
        addValue = progressbar.val(value);
        $('.progress-value').html(value + '%');
        if (value == max) {
        clearInterval(animate);
        //Do Something
 }
if (value == 16) {
//Do something 
}
if (value == 38) {
//Do something
}
if (value == 55) {
//Do something 
}
if (value == 72) {
//Do something 
}
if (value == 1) {
//Do something 
}
if (value == 86) {
//Do something 
    }

};
var animate = setInterval(function() {
loading();
}, time);
};
});
</script>

Fügen Sie diese auf Ihre HTML-Datei.

<div class="demo-wrapper html5-progress-bar">
<div class="progress-bar-wrapper">
 <progress id="progressbar" value="0" max="100"></progress>
 <span class="progress-value">0%</span>
</div>
 </div>

Hope dies wird Ihnen einen Start.

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top