Show Loading image div Bis vollständig geladen

Ich versuche zu zeigen, ein Bild laden, bis eine div-Inhalt vollständig geladen ist.

  1. Ersten verstecken .main-slider div
  2. Klasse hinzufügen .loading zu .main-slider: <div id="main-slider loading"></div>
  3. Wenn .main-slider div Elemente geladen hat
  4. .loading entfernt,
  5. Dann fade-in .main-slider div

html 

 <div class='sly-main-slider'>
 <div> <!-- Content -->
 <img src="http://4.bp.blogspot.com/-gk6rnMRH9qE/VXJ40BWuC4I/AAAAAAAABZs/BWesiVwBgfg/s1050/camera-girl-nikon-photography-Favim.com-205093.jpg"/>
 </div>
 </div> <!--sly-main-slider end-->

jquery versucht, hier ein fiddle:

//when user browses to page
$(".sly-main-slider div").hide();
$(".sly-main-slider").addClass("loading");

$(".sly-main-slider div").load(function() {
  //Handler for .load() called.
  $(".sly-main-slider div").show();
  $(".sly-main-slider").removeClass("loading");
});
InformationsquelleAutor Aariba | 2015-07-15
  1. 1

    Lesen aus Ihren Kommentaren, die Sie Steuern möchten nur einige Teile der Seite, die Bilder laden, richtig? Wenn Sie suchen, nur die überprüfung Bilder, die Sie könnte nehmen Sie einen Blick auf http://imagesloaded.desandro.com/

    Einfachen Schritten:

    • Gehören jQuery
    • Gehören Imagesloaded Skript

    • Fire it up wie:

      $(".sly-main-slider div").hide();
$(".sly-main-slider").addClass("loading");
$('.sly-main-slider div').imagesLoaded()
 .done( function( instance ) {
     $(".sly-main-slider div").show();
     $(".sly-main-slider").removeClass("loading");
 });

    Hoffe es hilft

    • Schön, Fiddle, bitte.
    • Ich habe eine Frage, ich bin mit LazyLoad-plugin für XT Bild src es funktioniert, wenn die Bild hat viewport, so ist das plugin funktioniert mit LazyLoad-plugin?
    • Fiddle nicht ausgeführt es irgendwie...machte einen Wetransfer für Sie.. wir.tl/vjxkTHJJ1k Bitte sehen, ob es auch für Sie funktioniert, funktioniert es glatt hier. Überprüfen Sie die Konsole für den status-Meldungen wenn Sie diese laufen. Ich habe nie kombiniert die 2 aber warum nicht 🙂 ich würde vorschlagen, die Kombination der ersten Bilder, die gezeigt werden, zunächst in 1-div, so dass Sie verwenden können, ImagesLoaded auf Sie.
    InformationsquelleAutor Vincent Fabris
  2. 2

    In Ihrem code, den Sie versuchen, legen Sie die onload Ereignis und div. Das wird nicht funktionieren. Sie haben befestigen Sie es an das Fenster-element wie das

    $(".sly-main-slider div").hide();
$(".sly-main-slider").addClass("loading");

$(window).load(function() {
   //Handler for .load() called.
   $(".sly-main-slider div").show();
   $(".sly-main-slider").removeClass("loading");
});
    • Danke, aber ich versuche dies, wenn .sly-main-slider div hat, laden, nicht laden-Fenster. Bitte denken Sie über diese.
    • Sie können nicht Anhängen load-Ereignis zu divs, kann Es angebracht sein nur Körper und/oder jede externe Ressource.
    • So, wie es zu erreichen? bitte sehen Bedeutet: Listen.
    • Einfach befestigen Sie es an das Fenster, wie ich bereits in meiner Antwort
    • Sehen Sie sich bitte die Beispiel-Website, was ich will: tinyurl.com/nzob4ls
    InformationsquelleAutor Tino M Thomas
  3. 1

    Versuchen Sie dies:
    Starten Sie Ihre img-mit leerem src, ändern Sie dann die src des Bildes async und fügen Sie einen Rückruf, wenn der img ('src') Attribut hat sich komplett verändert

    JS:

    $(".sly-main-slider div img").attr('src', "#");
$(".sly-main-slider").addClass("loading");
$(".sly-main-slider div").hide();

$(".sly-main-slider div img").load(function () {
    $(".sly-main-slider div").show();
    $(".sly-main-slider").removeClass("loading");
}).attr('src', "http://lorempixel.com/g/1000/1000/");

    CSS:

    .loading {
    position: absolute;
    top: 10%;
    left: 10%;
    z-index: 2000;
    background: url(http://1.bp.blogspot.com/-nfXo9GWbDtM/VOn0vr4yLMI/AAAAAAAABCA/dDNgd7_QCFo/s1600/block-loader.gif) no-repeat center center;
    height: 32px;
    width: 32px;
}

.loading:after {
  position: absolute;
  top: 8px;
  left: 40px;
  content: 'Loading...';
} 
body {
    position: relative;
    display: block;
}

    HTML:

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='sly-main-slider'>
    <div>
        <img src="http://lorempixel.com/g/1000/1000/" alt="" />
    </div>
</div>
<!--sly-main-slider end-->

    • Nicht möglich zu leeren src
    • Sie können immer tun es über JS: $(".sly-main-slider div img").attr('src', "#"); ich eddited die Antwort auf die passen.
    • Danke, aber ich meine, dass ich noch viele Bilder, ich bin nicht in der Lage, die vielen Bild-link zu dieser jquery. 🙁
    InformationsquelleAutor Aramil Rey
Schreibe einen Kommentar