CODEWITHSUNDEEP
javascripthtmlcss
Tudu
Tudu

Reputation: 72

Showing a loader until slideshow fully loaded

I have the following slideshow and it's take too much to load because the images are too large soo i want to show a loader until the slideshow is fully loaded. Here is my slider:

<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>

And i want to add this loader:

.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>

how can i do that with javascript?

Upvotes: 1

Views: 1974

Answers (4)

Patrick Mlr
Patrick Mlr

Reputation: 2965

Here's a snippet. Maybe this helps you.

With jQuery, you could use $(document).ready() to execute something when the DOM is loaded and $(window).on("load", handler) to execute something when all other things are loaded as well, such as the images.

EDIT:

Added a white background with 0.05 transparency.

$(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>

Upvotes: 1

Khaleel
Khaleel

Reputation: 1371

Add a loader image in element with Id 'loader_img' where slide_img is each of your slideshow images

// 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();
});

load event will help with your scenario. Hope it help.

Upvotes: 0

Vikramaditya
Vikramaditya

Reputation: 5574

You can create image object and hide loader in callback

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

Upvotes: 0

Quasar
Quasar

Reputation: 100

You can do it like this

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");
});

Hope this helps.

Upvotes: 0

Related Questions