javascript - 一旦调整大小的图像提供下载，隐藏加载 gif

Question

我有一个小的图像调整大小脚本，它可以立即提供调整大小后的图像作为下载。如果这是正常情况，结果内容加载在同一页面的 div 中，那么下面的 js 代码就会起作用，就像在我网站的其他部分一样。但这里的情况是输出(调整大小的图像)作为强制下载提供，它显示为下载提示面板，因此下面的代码加载 load.gif 但无法隐藏它。因此，loading.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>

<小时/>

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>

<小时/>

正如您所知，我在不同的 .php 页面上使用 WordPress cms 和调整大小脚本，并且该脚本使用 session_start()。我刚学php，对JS一窍不通。是的，我也在进行自己的搜索、研究和调整。到目前为止，一切都还没有解决。如果您还需要 resize.php 中的代码以获得更好的引用，请告诉我。

<小时/>

为了简单起见，这里是预期序列的简单说明。

1. 访问者点击提交按钮。

2. 数据提交到 resize.php，如表单操作标记所示。

3. 上面的 JS 脚本被触发并显示隐藏的 div 类“page-load”，其中包含加载 gif(以便访问者知道正在发生某些事情)。

4. 现在调整大小过程已完成，访问者将获得下载和保存面板。

5. 问题:表单页面已重新加载，但加载 gif 仍然可见。希望这是清楚的。

<小时/>

Bottomline : How to hide the loading gif once download panel appears/image is resized.

<小时/>

首次更新:类似问题 described here收集选票但仍未解决。

第二次更新:我仍在寻找答案。我以为这会是在公园里散步。严重错误。

Answer 1

我决定为您介绍一下这个问题。以下是有关如何使用 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");