2

I have a AJAX script calling my php file pulling images from the database. I want to implement a progress bar for the images whilst it loads. I am getting the images fine from the database, 12 at a time to be specific. I would like to know how to add a progress bar for when the images are being loaded. The images are appended to the div via there path location.

JAVASCRIPT

  $.ajax({
        url: "/gallery/getimages.php",
        type: "POST",
        dataType: "json",
        data: {
            imagesArray: imgArr,
            action: "load",
            category: q,
            isLimited: isLimited
        },
        success: function(JSONrs) { 
        JSONconsoleDebugObj = JSONrs;
            if(JSONrs.length > 0){

            console.log("check returned okay");
                console.log("okay ... create page in book");
                pageDeets = createPage();

                for (var i = 0; i< JSONrs.length; i++){
                    console.log("okay ... load image" + JSONrs[i]["image_thumb"] );
                    updateGallery(JSONrs[i],pageDeets[0],tmpNum);
                }

                createClear(pageDeets[0]);

                console.log(tmpNum);
                runJumperAnimation(tmpNum);
            } else {
                runJumperAnimation(pageNum);
            }
            console.log("jump to " + tmpNum);
        },
        error: function(jqXHR, textStatus, errorThrown){

            console.log(jqXHR.responseText);
            console.log(textStatus, errorThrown);
        }

    });

I'm assuming I can run something between the for loop where it updates the gallery. I just don't know how to implement a progress bar. Effectively I'll need to know the request the server is making i.e the file size and the amount loaded so far. That's where I assume I'll need to use some sort of XMLHttpRequest() but everywhere on the net talks about base64 encoding the image to do this. This is not an option because the whole script works on the premise of knowing the source of the image via the inline src attribute of the image.

Tanil
  • 328
  • 3
  • 17
  • possible duplicate of [How to get progress from XMLHttpRequest](http://stackoverflow.com/questions/76976/how-to-get-progress-from-xmlhttprequest) –  May 30 '14 at 15:34
  • I saw that but I'm not sending the file via php so I don't send a header with file details plus that shows how to upload a file, in such a method file sizes are known so progress can be tracked. The difference here being the image is obtained via the source attribute and its a download request from the server – Tanil May 30 '14 at 15:51
  • can you remove the possible answer? It does not answer the question, the very closest it got to a solution was as mentioned in my question, a base 64 solution. I can not use that because the script relies on the src attribute being the file path. I could make a possible work around for it, but I feel this should be a possible task. The inspect tools for each browser under the network tab shows the images being loaded after the AJAX call is made so if the browser is catching it, so should I in the script. I'm just unaware of how to do so. – Tanil May 30 '14 at 16:12
  • The very simplest solution is to monitor the image `load` event and update an HTML5 `` element based on the number of images to download and how many you have received. If you want finer resolution you'll need to use AJAX calls and monitor the `progress` on the download, and for that you need reliable `Content-length` headers. The linked question talks about monitoring a download. You _can_ use a PHP script to provide `Content-length` - just send the `src` attribute to it as part of the query string. This is not a 'work-around' - it's the way it's done. –  May 30 '14 at 16:48

0 Answers0