once resized image is offered as download, hide the loading gif

Question

I have a little image resizing script which promptly offers the resulting resized image as a download. If this was a normal case where the result-content was being loaded within a div on the same page the js code below would have worked, as it does on my other part of the site. But here the scenario is that the output ( resized image ) is offered as a force download, which appears as a download prompt panel, hence the code below loads the loading.gif but fails to hide it. Hence the loading.gif remains visible.

I guess the codes i need either changed or fixed somehow, begins after line 6, below in the JS Code. Till then it is functional and works as expected. Please note that my resizing script is completely in 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>

---

Just so you know, I use a wordpress cms and the resize script on a different .php page and the script uses session_start(). I am just learning php and not familiar with JS at all. And Yes I am doing my own search, research and tweaks too. Nothing is working out till now. If you also need codes from resize.php for better reference please let me know.

---

Just for the sake of simplicity, here is a simple illustration of expected sequence.

1. The visitor clicks the submit button.

2. The data is submitted to resize.php as evident by forms action tag.

3. JS script above gets triggered and shows the hidden div class "page-load" which contains the loading gif ( so the visitor know something is happening ).

4. Now the resize process is done and the visitors gets a download and save panel.

5. ISSUE : The form page has reloaded but the loading gif is still visible. Hope that was clear.

---

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

---

First Update : Similar issue described here gathers votes but remains unsolved.

Second Update : I am still looking for an answer. I thought this would be a walk in a park. Gravely mistaken.

Answer 1

I decided to walk through this one for you. Here is a step by step guide on how to build your request with ajax.

What the code below creates can be seen at http://tomsfreelance.com/stackoverflow/imageDownloadLoading/main.php

Files including the PHPs are included in the directory (http://tomsfreelance.com/stackoverflow/imageDownloadLoading/)

Step 1: Set up a form. We'll keep it simple for now.

<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>

Step 2: Add some 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>

Step 3: Make the PHP page that processes the file.

<?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";
        }
    }

Step 4: Make the download page.

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