一次調整大小的圖像提供下載，隱藏加載gif

Question

我有一個小圖像調整大小的腳本，它可以及時提供作爲下載產生的調整大小的圖像。如果這是一個正常的情況下，結果內容被加載到同一個頁面上的div內，下面的js代碼將會起作用，就像我在網站的其他部分那樣。但這裏的情況是，輸出（調整大小的圖像）是作爲強制下載提供的，其顯示爲下載提示面板，因此下面的代碼加載 loading.gif，但不能隱藏它。因此loading.gif保持可見。

我猜我需要更改或修正某些代碼，從第6行開始，下面的JS代碼。直到它功能正常，並按預期工作。請注意，我的調整腳本完全在PHP中。

---

JS

<script type="text/javascript"> 
    jQuery(document).ready(function() { 
     var $pageLoad = jQuery('.page-load'); 
     $pageLoad.hide(); 
     jQuery('#SubmitButton').on('click', function() { 
      $pageLoad.show(100); 
     }); 
//code till here works fine and triggers gif on submit but dunno after this 
    //what codes should go here to fadeout or hide the loading gif ? 
    //not even sure if this is right approach 
    }); 
</script> 

---

HTML：

<form action="http://xxxxxxxxxxx/wp-content/themes/xxxxx/resize/resize.php" id="UploadForm" method="post" enctype="multipart/form-data"> 
<input type="file" name="image" /> 
<input type="submit" id="SubmitButton" name="SubmitButton" value="Upload" /> 
</form> 

---

只要你知道，我用一個WordPress cms和resize腳本放在不同的.php頁面上，腳本使用session_start()。我只是學習PHP，並不熟悉JS。是的，我正在做我自己的搜索，研究和調整。到現在爲止沒有任何工作要做。如果您還需要resize.php中的代碼以獲得更好的參考，請告訴我。

---

只是爲了簡單起見，下面是預期序列的簡單說明。

1. 訪問者點擊提交按鈕。

2. 將數據提交給resize.php，如表單動作標記所示。

3. 上面的JS腳本被觸發並顯示隱藏的div類「page-load」，其中包含加載gif（所以訪問者知道發生了什麼）。

4. 現在調整過程完成，訪問者獲取下載和保存面板。

5. 問題：表單頁面已重新載入，但載入的gif仍然可見。希望很明顯。

---

底線：如何隱藏加載GIF下載一次出現面板/圖像的尺寸。

---

首先更新：類似的問題described here收集選票，但仍然沒有解決。

第二次更新：我仍在尋找答案。我以爲這會在公園散步。嚴重錯誤。

Answer 1

我決定爲你走過這一個。以下是關於如何使用ajax構建請求的分步指南。

什麼下面的代碼將創建可以在http://tomsfreelance.com/stackoverflow/imageDownloadLoading/main.php

文件看出，包括被包含在目錄（http://tomsfreelance.com/stackoverflow/imageDownloadLoading/）

步驟1中的脈動熱管：設置一個形式。我們現在將保持簡單。

<form name="resizeImage"> 
    <select id="image" onChange="com.demo.updateImage();"> 
     <option value="img1.jpg">img1.jpg</option> 
     <option value="img2.jpg">img2.jpg</option> 
     <option value="img3.jpg">img3.jpg</option> 
    </select> 
    <input type="text" id="tint" placeholder="Tint" onKeyUp="com.demo.updateTint();"> 
    <input type="button" id="download" value="Download" onClick="com.demo.downloadImage();" /> 
    <br /> 

    <img style="max-width: 400px; max-height: 400px;" src="img1.jpg" id="preview"> 
    <div id="color"></div> 
</form> 

第2步：添加一些JavaScript/AJAX

<script> 
    var com = {}; 
    com.demo = {}; 
    com.demo.loading = false; 
    com.demo.loadingBox = null; 
    com.demo.loadingStage = 1; 

    com.demo.updateImage = function() { 
     $('#preview').prop('src', $('#image').val()); 
     com.demo.updateTint(); 
    } 

    com.demo.updateTint = function() { 
     $('#color').css({ 
      'width': $('#preview').outerWidth() + 'px', 
      'height': $('#preview').outerHeight() + 'px', 
      'background-color': $('#tint').val(), 
      'z-index' : 10, 
      'position': 'absolute', 
      'left': $('#preview').position().left, 
      'top' : $('#preview').position().top, 
      'opacity' : 0.4 
     }); 
    } 

    com.demo.doLoading = function() { 

     if (com.demo.loading) { 
      if (com.demo.loadingBox == null) { 
       com.demo.loadingBox = $('<div id="loading">Loading</div>').appendTo('body').css({ "position" : "absolute", "width" : "100px", "left" : "50px", "top" : "50px", "border" : "5px solid #000000", "padding" : "10px", "z-index" : "20", "background-color" : "#FFFFFF" }); 
      } 
      else com.demo.loadingBox.css({ 'display' : 'block' }); 

      com.demo.loadingStage = ++com.demo.loadingStage % 3; 
      var string = "Loading"; 
      for (var x = 0; x < com.demo.loadingStage; x++) { 
       string += "."; 
      } 

      com.demo.loadingBox.text(string); 
      setTimeout(function() { com.demo.doLoading(); }, 1000); 
     } 
     else { 
      com.demo.loadingBox.css({ 'display' : 'none' }); 
     } 
    } 

    com.demo.downloadImage = function() { 
     var data = {}; 
     data.img = $('#image').val(); 
     data.tint = $('#tint').val(); 

     // Show loading box. 
     com.demo.loading = true; 
     com.demo.doLoading(); 

     $.post("convert.php", data) 
     .done(function(d) { 
      com.demo.loading = false; 
      document.location.href = d; 
     }); 
    } 
</script> 

第3步：處理該文件中的PHP頁面。

<?php 
    function hex2rgb($hex) { 
     $hex = str_replace("#", "", $hex); 

     if(strlen($hex) == 3) { 
      $r = hexdec(substr($hex,0,1).substr($hex,0,1)); 
      $g = hexdec(substr($hex,1,1).substr($hex,1,1)); 
      $b = hexdec(substr($hex,2,1).substr($hex,2,1)); 
     } else { 
      $r = hexdec(substr($hex,0,2)); 
      $g = hexdec(substr($hex,2,2)); 
      $b = hexdec(substr($hex,4,2)); 
     } 
     $rgb = array($r, $g, $b); 
     //return implode(",", $rgb); // returns the rgb values separated by commas 
     return $rgb; // returns an array with the rgb values 
    } 

    if (isset($_POST['img'])) { 
     $im = imagecreatefromjpeg($_POST['img']); 
     $color = (empty($_POST['tint'])) ? hex2rgb("#000000") : hex2rgb($_POST['tint']); 

     if (imagefilter($im, IMG_FILTER_COLORIZE, $color[0], $color[1], $color[2])) { 

      header('Content-Description: File Transfer'); 
      header("Content-type: application/octet-stream"); 
      header("Content-disposition: attachment; filename=download.jpg"); 
      imagejpeg($im, "download.jpg"); 
      echo "download.php"; 
     } 
    } 

第4步：進入下載頁面。

<?php 
     header('Content-Description: File Transfer'); 
     header("Content-type: application/octet-stream"); 
     header("Content-disposition: attachment; filename=download.jpg"); 
     readfile("download.jpg");