一次调整大小的图像提供下载，隐藏加载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");