Показать progessbar на странице load

Question

Я создал сценарий загрузки альбома facebook на php. Когда я нажму на кнопку загрузки, сценарий выберет все фотографии в этом альбоме за сценой и застегнет их в папке. Я хочу запустить «индикатор выполнения», как только пользователь загрузит кнопку загрузки, так как процесс загрузки может занять некоторое время.

Ниже index.php

if ($album['count'] != "0 photos") 
{ 
    echo "<a href=\"download.php?id={$album['id']}\" title='Download this Album' class='downloadbtn'><img src=\"common/images/download_button (1).png\"></a>"; 
} 

Здесь я передаю идентификатор альбома в download.php

и Ниже приведен код download.php, где я загрузке изображений в папке загрузки, создание архива всех что изображения и загрузка этого zip-файла.

<?php 
require 'facebook/facebook.php'; 

$facebook = new Facebook(array(
      'appId' => 'xxxxxxxxxxxxx', 
      'secret' => 'xxxxxxxxxxxxxxxxxxxxx', 
      'cookie' => true, 
     )); 

//GETTING THE ID HERE FROM INDEX.PHP FILE 

$albumid = $_GET['id']; 
$photos = $facebook->api("/{$albumid}/photos?limit=50"); 

$file_name = rand(1, 99999) . "_image.zip"; 
$albumArr = array(); 
foreach ($photos['data'] as $photo) { 
    $albumArr[] = $photo['source']; 
} 

create_zip($albumArr, $file_name); 

function create_zip($files, $file_name, $overwrite = false) { 
    $i = 0; 
    $imgFiles = array(); 
    foreach ($files as $imglink) { 
     $img = @file_get_contents($imglink); 
     $destination_path = 'downloads/' . time() . "Image_" . $i . '.jpg'; 
     @file_put_contents($destination_path, $img); 
     $imgFiles[] = $destination_path; 
     $i++; 
    } 

    if (file_exists($file_name) && !$overwrite) { 
     return false; 
    } 
    $valid_files = array(); 
    if (is_array($imgFiles)) { 
     foreach ($imgFiles as $file) { 
      $valid_files[] = $file; 
     } 
    } 

    if (count($valid_files)) { 

     $zip = new ZipArchive(); 
     if ($zip->open($file_name, $overwrite ? ZIPARCHIVE::OVERWRITE : ZIPARCHIVE::CREATE) !== true) { 
      echo "Sorry ZIP creation failed at this time"; 
     } 
     $size1 = 0; 
     foreach ($valid_files as $file) { 
      $size1+= filesize($file); 
      $zip->addFile($file, pathinfo($file, PATHINFO_BASENAME)); 
     } 

     $zip->close(); 

     $allimages = glob('downloads/*.jpg'); 

     foreach ($allimages as $img) { // iterate images 
      if (is_file($img)) { 
       unlink($img); // delete images 
      } 
     } 

     $count = $zip->numFiles; 
     $resultArr = array(); 
     $resultArr['count'] = $count; 
     $resultArr['destination'] = $file_name; 

     $filename = $file_name; 
     $filepath = $_SERVER['HTTP_HOST'] . '/'; 
     $path = $filepath . $filename; 

     if (file_exists($filename)) { 
      // push to download the zip 
      header('Content-type: application/zip'); 
      header('Content-Disposition: attachment; filename="' . $filename . '"'); 
      readfile($filename); 
      unlink($filename); 
     } 
    } else { 
     return false; 
    } 
} 
?> 

Я хочу запустить «индикатор выполнения», как только пользователь загрузит кнопку загрузки, так как процесс загрузки может занять некоторое время.

Как это сделать? Спасибо

Answer 1

Что-то вроде этого? Пожалуйста, скажите мне, если я не понял ваш вопрос

HTML:

<img id="loadingImage" src="pathToImage" alt="" style="display:none" /> 
//pathToImage is the path to where your image is located 

JQuery:

$('#YourButtonID').click(function(){ 
    $('#loadingImage').css('display','block'); 
    //call your download page 
    return false; 
}); 

После загружаемое и перенаправлять закончены, вызовите этот метод, чтобы скрыть прогрессбар

$('#loadingImage').css('display','none'); 

Answer 2

Вы можете сделать это с помощью ajax.

$(document).ready(function() 
{ 
    $("#download_button").click(function() { 
    document.getElementById('progressbar').style.display=''; 
    //call your download page. 
    }); 
});