Zeige einen Loader, bis die Diashow voll geladen ist

Question

Ich habe die folgende Diashow und es dauert zu viel zu laden, weil die Bilder zu groß sind, so dass ich einen Loader anzeigen möchte, bis die Diashow vollständig geladen ist. Hier ist mein Schieber:

<div class="slideshow-container" > 



<div class="mySlides fade"> 
    <div class="numbertext">3/1</div> 
    <img src="Images/Poze galerie/1.jpg" style="width:100%"> 
</div> 

<div class="mySlides fade"> 
    <div class="numbertext">3/2</div> 
    <img src="Images/Poze galerie/2.jpg" style="width:100%"> 
</div> 

<div class="mySlides fade"> 
    <div class="numbertext">3/3</div> 
    <img src="Images/Poze galerie/7.jpg" style="width:100%"> 
</div> 


<a class="prev" onclick="plusSlides(-1)">❮</a> 
<a class="next" onclick="plusSlides(1)">❯</a> 

</div> 

<div style="text-align:center"> 
    <span class="dot" onclick="currentSlide(1)"></span> 
    <span class="dot" onclick="currentSlide(2)"></span> 
    <span class="dot" onclick="currentSlide(3)"></span> 

</div> 

<script src="Styles/SlideSow.js"></script> 

und ich möchte diesen Lader hinzuzufügen:

.loader { 
 
    border: 16px solid #f3f3f3; 
 
    border-radius: 50%; 
 
    border-top: 16px solid #3498db; 
 
    width: 120px; 
 
    height: 120px; 
 
    -webkit-animation: spin 2s linear infinite; 
 
    animation: spin 2s linear infinite; 
 
} 
 

 
@-webkit-keyframes spin { 
 
    0% { -webkit-transform: rotate(0deg); } 
 
    100% { -webkit-transform: rotate(360deg); } 
 
} 
 

 
@keyframes spin { 
 
    0% { transform: rotate(0deg); } 
 
    100% { transform: rotate(360deg); } 
 
}

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

wie kann ich tun, mit Javascript?

Answer 1

Hier ist ein Schnipsel. Vielleicht hilft dir das.

Mit jQuery, könnten Sie $(document).ready() verwenden, um etwas auszuführen, wenn die DOM geladen und $(window).on("load", handler) etwas auszuführen, wenn alle anderen Dinge auch, wie die Bilder geladen.

---

EDIT:

Added ein weißer Hintergrund mit 0.05 Transparenz.

$(window).on("load", function() { 
 
    $('#loaderContainer').hide(); 
 
    console.log("loader hide"); // delete this, it's just a sample to show thats loaded. 
 
});

#loaderContainer { 
 
    background-color: rgba(255, 255, 255, 0.95); /* adjust the 0.95 for transparency */ 
 
    left: 0; 
 
    position: fixed; 
 
    top: 0; 
 
    width: 100%; 
 
} 
 
.loader { 
 
    border: 16px solid #f3f3f3; 
 
    border-radius: 50%; 
 
    border-top: 16px solid #3498db; 
 
    width: 120px; 
 
    height: 120px; 
 
    margin: 20% auto 0; /* Adjust the 20% to move the loader up or down. */ 
 
    -webkit-animation: spin 2s linear infinite; 
 
    animation: spin 2s linear infinite; 
 
} 
 
@-webkit-keyframes spin { 
 
    0% { 
 
    -webkit-transform: rotate(0deg); 
 
    } 
 
    100% { 
 
    -webkit-transform: rotate(360deg); 
 
    } 
 
} 
 
@keyframes spin { 
 
    0% { 
 
    transform: rotate(0deg); 
 
    } 
 
    100% { 
 
    transform: rotate(360deg); 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<!-- Slideshow here --> 
 
<img src="http://placehold.it/3000x3000" style="width:50px"> 
 
<img src="http://placehold.it/3100x3000" style="width:50px"> 
 
<img src="http://placehold.it/3200x3000" style="width:50px"> 
 
<img src="http://placehold.it/3300x3000" style="width:50px"> 
 
<img src="http://placehold.it/3400x3000" style="width:50px"> 
 
<img src="http://placehold.it/3500x3000" style="width:50px"> 
 
<img src="http://placehold.it/3600x3000" style="width:50px"> 
 
<img src="http://placehold.it/3700x3000" style="width:50px"> 
 
<img src="http://placehold.it/3800x3000" style="width:50px"> 
 
<img src="http://placehold.it/3900x3000" style="width:50px"> 
 
<img src="http://placehold.it/7900x3000" style="width:50px"> 
 
<img src="http://placehold.it/7900x7000" style="width:50px"> 
 
<!-- Slideshow above --> 
 

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

Answer 2

Sie können es tun, wie diese

HTML -

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

CSS -

#load { 
    position: fixed; 
    width: 100%; 
    height: 100%; 
    z-index: 30; 
} 
.loader { 
    /*add positioning if necessary*/ 
    border: 16px solid #f3f3f3; 
    border-radius: 50%; 
    border-top: 16px solid #3498db; 
    width: 120px; 
    height: 120px; 
    -webkit-animation: spin 2s linear infinite; 
    animation: spin 2s linear infinite; 
} 
@-webkit-keyframes spin { 
    0% { -webkit-transform: rotate(0deg); } 
    100% { -webkit-transform: rotate(360deg); } 
} 
@keyframes spin { 
    0% { transform: rotate(0deg); } 
    100% { transform: rotate(360deg); } 
} 

JQuery -

$(window).on("load", function() { 
    $("#load").fadeOut("slow"); 
}); 

Hoffnung, das hilft.

Answer 3

können Sie Bild erstellen Objekt und ausblenden loader in Rückruf

// Show Loader by default. 
var img1 = new Image(); 
img1.src = "Your Image Url"; 
img1.onload = function() { 
    console.log('image loaded'); 
    // hide loader here 
} 

Answer 4

eines Laders Bild hinzufügen Element mit Id 'loader_img' wo slide_img jede Ihrer Diashow Bilder ist

// show loading image 
$('#loader_img').show(); 

// slide image loaded ? 
$('#slide_img').on('load', function(){ 
    // hide/remove the loading image 
//if last image 
    $('#loader_img').hide(); 
}); 

laden Ereignis wird mit Ihrem helfen Szenario. Hoffe es hilft.