我有一个小的图像大小调整脚本，它会立即提供生成的调整大小的图像作为下载。如果这是在同一页面上的div 中加载结果内容的正常情况，那么下面的 js 代码就会起作用，就像在我网站的其他部分一样。但这里的情况是输出（调整大小的图像）作为强制下载提供，显示为下载提示面板，因此下面的代码加载加载.gif但无法隐藏它。因此，加载.gif仍然可见。
我想我需要更改或修复的代码要么以某种方式修复，从 JS 代码下面的第 6 行开始。在此之前，它功能正常并按预期工作。请注意，我的大小调整脚本完全是 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>
网页 ：
<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>
正如您所知，我在不同的.php页面上使用wordpress cms和调整大小脚本，并且该脚本使用session_start()。我只是在学习php，根本不熟悉JS。是的，我也在做自己的搜索、研究和调整。到目前为止，没有任何进展。 如果您还需要调整大小的代码.php为了更好地参考，请告诉我。
为了简单起见
，这里是预期序列的简单说明。
访客单击提交按钮。
提交数据以调整大小.php如表单操作标记所示。
上面的JS脚本被触发并显示隐藏的div类"page-load"，其中包含加载gif（因此访问者知道正在发生某些事情）。
现在，调整大小过程已完成，访问者将获得下载和保存面板。
问题：表单页面已重新加载，但加载 gif 仍然可见。希望这是清楚的。
底线：下载面板出现/调整图像大小后，如何隐藏加载的gif。
第一次更新：这里描述的类似问题收集了投票，但仍未解决。
第二次更新：我仍在寻找答案。我以为这会是在公园里散步。大错特错。
我决定为你介绍一下。以下是有关如何使用 ajax 构建请求的分步指南。
下面的代码创建的内容可以在 http://tomsfreelance.com/stackoverflow/imageDownloadLoading/main.php 中看到
包含 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");