我想以“波浪”形式加载图像。

Question

<html>
<section>

<style>
img{
 width: 150px;
 height:150px;
 float:left;
 }
 </style>
 </section>


 <script>

 var img = undefined,
 section = document.querySelector('section'),
 images=[
 "http://www.psdgraphics.com/file/red-number-0.jpg",
 "http://www.psdgraphics.com/file/red-number-1.jpg",
 "http://www.psdgraphics.com/file/red-number-2.jpg",
 "http://www.psdgraphics.com/file/red-number-3.jpg",
 "http://www.psdgraphics.com/file/red-number-4.jpg",
 "http://www.psdgraphics.com/file/red-number-5.jpg",
 "http://www.psdgraphics.com/file/red-number-6.jpg"
  ];

  function loadImage( i ){
   img = document.createElement('img');
   section.appendChild(img);
   img.dataset['index'] = i;
   img.src=images[i];
 }
 for(var i=0;i<images.length;i++){

  loadImage(i)

  }

  </script>


  </html>

这是我的代码，目前我同时接收所有图像...仅在加载前一个图像时才想加载每个图像。

任何帮助将不胜感激

Answer 1

只需将伪递归回调分配给onload处理程序即可：

function loadImage( i ){
  if(i >= images.length) return;
  var img = document.createElement('img');
  section.appendChild(img);
  img.dataset['index'] = i;
  img.src=images[i];
  img.onload = () => loadImage(i+1);
}

loadImage(0);

或使用一些新的ES 7内容：

(async function(){

 for(var i = 0; i < images.length; i++){
  var img = document.createElement('img');
  section.appendChild(img);
  img.dataset['index'] = i;
  img.src=images[i];

  await new Promise(r => image.onload = r );
 }

 })()

Answer 2

可能一些setTimeout以及递归可以带来很好的效果：

 var img = undefined, section = document.querySelector('section'), images = [ "http://www.psdgraphics.com/file/red-number-0.jpg", "http://www.psdgraphics.com/file/red-number-1.jpg", "http://www.psdgraphics.com/file/red-number-2.jpg", "http://www.psdgraphics.com/file/red-number-3.jpg", "http://www.psdgraphics.com/file/red-number-4.jpg", "http://www.psdgraphics.com/file/red-number-5.jpg", "http://www.psdgraphics.com/file/red-number-6.jpg" ]; function loadImage(i) { img = document.createElement('img'); section.appendChild(img); img.dataset['index'] = i; img.src = images[i]; } var index = 0; function loadNext() { if(index < images.length) { loadImage(index); setTimeout(function(idx){ loadNext(); },200, index++); } } loadNext();

 img { width: 150px; height: 150px; float: left; }

 <html> <section> </section> </html>

我想以“波浪”形式加载图像。

问题描述

2 个解决方案

解决方案1
1 2017-08-16 17:29:10

解决方案2
0 2017-08-16 17:32:06

我想以“波浪”形式加载图像。

问题描述

2 个解决方案

解决方案1 1 2017-08-16 17:29:10

解决方案2 0 2017-08-16 17:32:06

解决方案1
1 2017-08-16 17:29:10

解决方案2
0 2017-08-16 17:32:06