CODEWITHSUNDEEP
jquery
user6043723
user6043723

Reputation: 177

jquery - Lazy Load - set delay

I'm following this tutorial 

https://www.resrc.it/demos/lazyload

and this is the code I'm using

<script src="https://use.resrc.it/0.9"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<script src="https://rawgit.com/resrcit/ReVIEW/master/jquery.review-1.0.0.min.js"></script>
<script>
  $(document).ready(function () {
    resrc.ready(function () {
      $('.resrc').review({
        callback : function () {
          resrc.run(this);
        }
      });
    });
  });

The above is used to lazy load an image and it is called using:

<img data-src="http://app.resrc.it/o=95/http://www.your-site.co/image.jpg" alt="An awesome dog" class="resrc"/>

In my example I have 10 images, and I want 2 seconds to pass before loading the next image. I'm not sure where to place jQuery's setTimeout function. When I placed it its delaying by 2 seconds than it loads all the images without any delay. I want it to load image 1 wait 2 seconds, load image 2 wait 2 seconds, load image 3 wait 2 seconds, etc...

Upvotes: 0

Views: 1251

Answers (1)

Syden
Syden

Reputation: 8625

This is more of a vanilla JS workaround than an actual solution to your scenario, however, for a 10 image case lazy loading may limit you more than necessary if you want to alter it's display setup, so maybe you'll still consider this.

You can place timedImg(); initialization inside a jQuery $(document).ready(); if you prefer as well.

function timedImg() {
  var image1 = document.getElementById("img1"),
    image2 = document.getElementById("img2"),
    image3 = document.getElementById("img3"),
    image4 = document.getElementById("img4"),
    image5 = document.getElementById("img5"),
    image6 = document.getElementById("img6"),
    image7 = document.getElementById("img7"),
    image8 = document.getElementById("img8"),
    image9 = document.getElementById("img9"),
    image10 = document.getElementById("img10");
  setTimeout(function() {
    image1.style.visibility = "visible"
  }, 0);
  setTimeout(function() {
    image2.style.visibility = "visible"
  }, 2000);
  setTimeout(function() {
    image3.style.visibility = "visible"
  }, 4000);
  setTimeout(function() {
    image4.style.visibility = "visible"
  }, 6000);
  setTimeout(function() {
    image5.style.visibility = "visible"
  }, 8000);
  setTimeout(function() {
    image6.style.visibility = "visible"
  }, 10000);
  setTimeout(function() {
    image7.style.visibility = "visible"
  }, 12000);
  setTimeout(function() {
    image8.style.visibility = "visible"
  }, 14000);
  setTimeout(function() {
    image9.style.visibility = "visible"
  }, 16000);
  setTimeout(function() {
    image10.style.visibility = "visible"
  }, 18000);
}

timedImg();
img {
  visibility: hidden;
}
<img src="https://placehold.it/100x100" alt="An awesome dog" id="img1" />
<img src="https://placehold.it/100x100" alt="An awesome dog" id="img2" />
<img src="https://placehold.it/100x100" alt="An awesome dog" id="img3" />
<img src="https://placehold.it/100x100" alt="An awesome dog" id="img4" />
<img src="https://placehold.it/100x100" alt="An awesome dog" id="img5" />
<img src="https://placehold.it/100x100" alt="An awesome dog" id="img6" />
<img src="https://placehold.it/100x100" alt="An awesome dog" id="img7" />
<img src="https://placehold.it/100x100" alt="An awesome dog" id="img8" />
<img src="https://placehold.it/100x100" alt="An awesome dog" id="img9" />
<img src="https://placehold.it/100x100" alt="An awesome dog" id="img10" />

Upvotes: 1

Related Questions