サーバからのイメージを動的にロードする（htmlギャラリーの場合）

Question

私は特定のフォルダからすべてのイメージをロードするように、ワウズリーダギャラリーを動的にしました。しかし問題は、それらがすべて同時にロードされ、ロードに時間がかかりすぎるということです。 jsやjqueryを使って、順番にロードするようにします。私のコード;

<div class="ws_images" > 
<ul> 
    <?php // start looping the pics 
    $inc = 0; 
    foreach (new DirectoryIterator('gallery/data1/images/') as $file) { 
    if($file->isDot()) continue; 
    $withoutExt = preg_replace('/\\.[^.\\s]{3,4}$/', '', $file->getFilename()); //removing the extension 
    ?> 

    <li> 
    <img class='imgs' src="gallery/data1/images/<?php echo $file->getFilename(); ?>" alt="<?php echo $withoutExt ?>" title="<?php echo $withoutExt; ?>" id="wows1_<?php echo $inc; $inc++; ?>"/> 
    </li> 
    <?php } // ending the loop ?> 

    </ul> 
    </div> 

私が推測する問題を解決しますが、私は私の動的なコードにそれを実装することはできません。このスレッドControlling image load order in HTMLを見つけた...私は多くのアプローチを試みたが、それらのどれも働いていない、助けてください！

Answer 1

ここで私はそれをテストしていないが、私はちょうどあなたが行う方法のアイデアを与えるためにそれを書いたので、あなたはあなたがこのコードをテストする必要がありますが、ここで

<div class="ws_images" > 
    <ul> 
     <?php // start looping the pics 
      $inc = 0; 
      foreach (new DirectoryIterator('gallery/data1/images/') as $file) { 
      if($file->isDot()) continue; 
      $withoutExt = preg_replace('/\\.[^.\\s]{3,4}$/', '', $file->getFilename()); //removing the extension 
      ?> 

      <li> 
      <img class='imgs' img-name="<?php echo $file->getFilename(); ?>" src="" alt="<?php echo $withoutExt ?>" title="<?php echo $withoutExt; ?>" id="wows1_<?php echo $inc; $inc++; ?>"/> 
      </li> 
     <?php } // ending the loop ?> 

    </ul> 
</div> 



<script> 
    var imgAddresses = []; 

    $('.ws_images ul li').each(function(){ 
     imgAddresses.push($(this).find('img').attr('img-name')); 
    }); 



    function loadImage(counter) { 
     //Break out if no more images 
     if(counter==imgAddresses.length) { return; } 

     //Grab an image obj 
     var I = document.getElementById("wows1_"+counter); 

     //Monitor load or error events, moving on to next image in either case 
     I.onload = I.onerror = function() { loadImage(counter+1); } 

     //Change source (then wait for event) 
     I.src = 'gallery/data1/images/'+imgAddresses[counter]; 
    } 

    loadImage(0); 
</script> 

を掲載その答えからコードimplementin何かを持っていますその