Lazy load images with each a differnt delay for showtime

Question

First question: Is there a way to lazy load different images with their corresponding URLs on one page, each image showing after a different delay after the page load?

Scenario:

first load page (for good SEO and user experience)
start lazy load of the images in the background
show image-1 one second after page and lazy load
show image-2 one second after image-1
show image-3 one second after image-2
....continuing for about 50 little images

I tried hours with code like:

<body>
    <div id="a1"></div>
    <div id="a2"></div>
    <div id="a3"></div>
</body>

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

<script language="javascript">
$(window).load(function(){ // This runs when the window has loaded
   var img1 = $("<img />").attr('src', 'https://www.google.nl/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png').load(function() { 
        $("#a1").append(img1); // When the image has loaded, stick it in a div
   });  

   var img2 = $("<img />").attr('src', 'https://www.google.nl/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png').delay(1000).load(function() {
        $("#a2").append(img2);
   });  

   var img3 = $("<img />").attr('src', 'https://www.google.nl/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png').delay(2000).load(function() {
        $("#a3").append(img3);
   });  

});
</script>

Second question: Is it possible to randomize the order of the image above while each image always has his own (different) URL link?

The `language` attribute is deprecated. Use `type="text/javascript"` instead or just ` — Andreas, Jan 20 '18 at 16:00

Andreas · Accepted Answer · 2018-01-20T19:11:28.017

With the help of Promises (Using promises) and the Fisher-Yates shuffle that's absolutely possible.

// just some tiny cats
const config = [
  {uri: "https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/Katzis1.jpg/320px-Katzis1.jpg", destination: "#a1"},
  {uri: "https://upload.wikimedia.org/wikipedia/commons/thumb/7/7b/Six_weeks_old_cat_(aka)_edit.jpg/320px-Six_weeks_old_cat_(aka)_edit.jpg", destination: "#a2"},
  {uri: "https://upload.wikimedia.org/wikipedia/commons/thumb/d/dc/Cats_Petunia_and_Mimosa_2004.jpg/320px-Cats_Petunia_and_Mimosa_2004.jpg", destination: "#a3"},
  {uri: "https://upload.wikimedia.org/wikipedia/commons/thumb/d/d7/1-month-old_kitten_35.jpg/320px-1-month-old_kitten_35.jpg", destination: "#a4"},
  {uri: "https://upload.wikimedia.org/wikipedia/commons/thumb/6/6b/1-month-old_kitten_44.jpg/320px-1-month-old_kitten_44.jpg", destination: "#a5"},
  {uri: "https://upload.wikimedia.org/wikipedia/commons/thumb/4/46/A_kitten_playing.JPG/320px-A_kitten_playing.JPG", destination: "#a6"}
];

// Fisher-Yates shuffle
// Source: https://stackoverflow.com/a/12646864/402037
const shuffleArray = (array) => {
  for (let i = array.length - 1; i > 0; i--) {
    const j = Math.floor(Math.random() * (i + 1));
    [array[i], array[j]] = [array[j], array[i]];
  }
}

// shows (and removes) the first image of an array of images
// calls itself after 1 second until there are no images left
const showImage = (images) => {
  if (images.length === 0) return;

  const image = images.shift();
  
  document.querySelector(image.destination).appendChild(image.img);

  setTimeout(function() {
    showImage(images);
  }, 1000);
}

// shuffle the array
// if you need to preserve the order of the images
// shuffle <promises> instead of <imageURIs>
shuffleArray(config);

// and convert the URIs to promises
// which resolve when their image has been loaded
const promises = config.map(image => {
    return new Promise(function(resolve) {
      const img = new Image();
      img.onload = function() {
        resolve(image);
      };
      image.img = img;
      img.src = image.uri;
    });
  });

// when all images are available
Promise.all(promises)
// show them (one at a time)
  .then(showImage);

img { width: 100px }

<div id="a1">#a1</div>
<div id="a2">#a2</div>
<div id="a3">#a3</div>
<div id="a4">#a4</div>
<div id="a5">#a5</div>
<div id="a6">#a6</div>

Update (with "more info" link)

const config = [
  {uri: "https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/Katzis1.jpg/320px-Katzis1.jpg", destination: "#a1", more: "..."},
  {uri: "https://upload.wikimedia.org/wikipedia/commons/thumb/7/7b/Six_weeks_old_cat_(aka)_edit.jpg/320px-Six_weeks_old_cat_(aka)_edit.jpg", destination: "#a2", more: "..."},
  {uri: "https://upload.wikimedia.org/wikipedia/commons/thumb/d/dc/Cats_Petunia_and_Mimosa_2004.jpg/320px-Cats_Petunia_and_Mimosa_2004.jpg", destination: "#a3", more: "..."},
  {uri: "https://upload.wikimedia.org/wikipedia/commons/thumb/d/d7/1-month-old_kitten_35.jpg/320px-1-month-old_kitten_35.jpg", destination: "#a4", more: "..."},
  {uri: "https://upload.wikimedia.org/wikipedia/commons/thumb/6/6b/1-month-old_kitten_44.jpg/320px-1-month-old_kitten_44.jpg", destination: "#a5", more: "..."},
  {uri: "https://upload.wikimedia.org/wikipedia/commons/thumb/4/46/A_kitten_playing.JPG/320px-A_kitten_playing.JPG", destination: "#a6", more: "..."}
];

const shuffleArray = (array) => {
  for (let i = array.length - 1; i > 0; i--) {
    const j = Math.floor(Math.random() * (i + 1));
    [array[i], array[j]] = [array[j], array[i]];
  }
}

const showImage = (images) => {
  if (images.length === 0) return;

  const image = images.shift();
  
  const moreInfo = document.createElement("a");
  moreInfo.href = image.more;
  moreInfo.textContent = "more info";
  
  const wrapper = document.createElement("div");
  wrapper.appendChild(image.img);
  wrapper.appendChild(moreInfo);
  
  document.querySelector(image.destination).appendChild(wrapper);

  setTimeout(function() {
    showImage(images);
  }, 1000);
}

shuffleArray(config);

const promises = config.map(image => {
    return new Promise(function(resolve) {
      const img = new Image();
      img.onload = function() {
        resolve(image);
      };
      image.img = img;
      img.src = image.uri;
    });
  });

Promise.all(promises).then(showImage);

img { width: 100px }

<div id="a1">#a1</div>
<div id="a2">#a2</div>
<div id="a3">#a3</div>
<div id="a4">#a4</div>
<div id="a5">#a5</div>
<div id="a6">#a6</div>

Thanks! But I want to have predefined div's to get the pictures in. Your script is extending a list but the div's I want to use are not all in the same place of the page. Besides I want to have them all they own URL linked — user3567864, Jan 20 '18 at 17:00
This is really nice! Now I have only one issue left. How can I add the "more info" URL that belongs to a specific picture to that pictures? — user3567864, Jan 20 '18 at 18:30
@user3567864 I've added a second version with a "more info" link. If the structure is not what you need feel free to change it on your own :) — Andreas, Jan 20 '18 at 19:15

Lazy load images with each a differnt delay for showtime

1 Answers1