Dynamisch Laden von Bildern vom Server (für HTML-Galerie)

Question

Also habe ich eine Wowslider-Galerie dynamisch gemacht, so dass es alle Bilder aus einem bestimmten Ordner lädt. Das Problem ist jedoch, dass alle gleichzeitig geladen werden und zu lange brauchen, um geladen zu werden. Ich möchte, dass sie nacheinander mit js oder jquery geladen werden. Mein Code;

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

ich diesen Thread Controlling image load order in HTML gefunden habe, die das Problem, das ich denke, löst aber ich kann es meinen dynamischen Code nicht implementieren ... Ich habe versucht, viele Ansätze, aber keiner von ihnen arbeitete, bitte helfen!

Answer 1

Hier haben Sie etwas implementin den Code aus dieser Antwort, die Sie hier gepostet

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

Sie müssen diesen Code testen, weil ich es nicht testen, aber ich schrieb es nur um Ihnen eine Vorstellung zu geben, wie zu tun das