Question

第一个问题： 有没有办法在一个页面上延迟加载不同图像及其相应的URL，每个图像在页面加载后显示不同的延迟？

情景：

首次加载页面（用于良好的搜索引擎优化和用户体验）
在后台开始延迟加载图片
在页面和延迟加载后一秒钟显示图像-1
在image-1
在image-2之后一秒钟显示图像-3
....继续拍摄约50张小图片

我用以下代码尝试了几个小时：

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

第二个问题： 是否可以随机化上面的图像顺序，而每个图像总是有自己的（不同的）URL链接？

Answer 1

在Promises（Using promises）和绝对可能的Fisher-Yates shuffle的帮助下。

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

更新（使用“更多信息”链接）

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>

延迟加载图片，每个图片都有不同的延迟时间

1 个答案: