Загрузка изображений один за другим с помощью PHP.

Question

У меня есть этот фрагмент PHP-кода, который загружает изображения из каталога и бросает их сразу на страницу. Мне было интересно, как добавить функциональность, которая загружает изображения один за другим, а не загружать их все сразу.

$path = "images/page1/"; 

if (is_dir($path)){ 
    $handle = opendir($path); 
} 
else{ 
    echo 'No image directory'; 
} 

$directoryfiles = array(); 
while (($file = readdir($handle)) !== false) { 
    $newfile = str_replace(' ', '_', $file); 
    rename($path . $file, $path . $newfile); 
    $directoryfiles[] = $newfile; 
} 

echo '<table>'; 
foreach($directoryfiles as $directoryfile){ 
     if(strlen($directoryfile) > 3){ 
     echo '<tr><td> <img src="'.$path.$directoryfile.'"/>'; 
     echo '<br>'.$path.$directoryfile.'</td></tr>'; 
     } 
    } 
echo '</table>'; 

closedir($handle); 

Спасибо.

Answer 1

это может работать для вас:

echo '<table>'; 
$delay=250; 
foreach($directoryfiles as $directoryfile){ 
     if(strlen($directoryfile) > 3){ 
      echo '<tr><td data-delay='.$delay.'> <img src="'.$path.$directoryfile.'"/>'; 
      echo '<br>'.$path.$directoryfile.'</td></tr>'; 

      $delay+=250;  
     } 
    } 
echo '</table>'; 

Answer 2

Я думаю, что вместо того, чтобы построить таблицу изображений, которые я бы поставил первое изображение, и я бы хранить URL в ине других изображений переменной JavaScript. Затем, когда вы хотите загрузить другие изображения (таймер, нажмите событие, ...), вам просто нужно изменить параметр src исходного изображения.

Answer 3

Вы не можете сделать это только с PHP, потому что PHP всегда будет отображать страницу и показывать результат сразу. Если вы просто хотите, чтобы эффект, вы можете посмотреть на этой простой JQuery скрипт:

How do I create a fade-in load effect, one after another image

Answer 4

Похоже Jquery является подход:

var dir = "images/page1/"; 
var fileextension = [".png", ".jpg"]; 
$.ajax({ 
//This will retrieve the contents of the folder if the folder is configured a 'browsable' 
url: dir, 
success: function (data) { 
    //Lsit all png file names in the page 
    $(data).find("a:contains(" + (fileextension[0]) + "), a:contains(" + (fileextension[1]) + ")").each(function() { 
     var filename = this.href.replace(window.location.host,"").replace("http:///", ""); 

      jQuery(document).ready(function() { 
      //hide a div after 3 seconds 
       setTimeout("$("body").append($("<img src=" + dir + filename + "></img>"));",3000); 
      }); 
     }); 
    } 
}); 

Внимание: этот код не был протестирован, но это должно дать вам представление о том, как подойти к вашей проблеме.

Answer 5

Вы можете сделать это с PHP, если вы используете output functions

Вот пример, номер будет виден один за другим:

for ($i = 1 ; $i <= 10 ; $i++) 
{ 
    echo $i."\n"; 
    flush(); 
    ob_flush(); 
    sleep(1); 
} 

• flush()
• ob_flush()