Question

i have some very simple js (i’m still learning) that basically reads the elements of a form and creates a url string that is passed to an imaging server, that in turn renders the image.

var imgURL = "site.com/path/to/image";
var product = "BirthdayCard_End" + "?&";
var page = 2;
var format;
var data;

function setPage(inputID)
    {
        page = inputID;
        setJPG();
    }

function FormValues()
    {
        var str = '';
        var elem = document.getElementById('form1').elements;
        for(var i = 0; i < elem.length; i++)
        {
            str += "$" + elem[i].id + "=" + elem[i].value + "&";
        }
        data = str;         
    }

function genPDF()
    {
        var format = "fmt=pdf&mediaMargin=48&bleedMargin=48&printerMark=1,1,1,1,1,Illustrator,.25,1";
        fullURL = imgURL + product + data + format;
        window.open(fullURL);       

    }

function setJPG()
    {
        FormValues();
        var format = "imageRes=200&fmt=jpg&wid=550&page=" + page;
        fullURL = imgURL + product + data + format;
        document.getElementById('lblValues').innerHTML = fullURL;
        document.getElementById('image').src = fullURL;
    }

i’m trying to figure out how to show a simple loader like this (http://fgnass.github.com/spin.js/#v1.2.5). how do I add something to the setJPG() function so that it pops up the loader everytime it is initialized, and then fades away once the image is loaded?

Answer 1

Suggested solution

For images, using a “loading spinner” is problematic. See below.

Instead of a spinner, first send a low resolution (consider B&W too) of the image. This SO question tells how.

Spinners for image loading

A problem with showing a spinner while you’re waiting for an image to be displayed is that the browsers do not reliably tell your JS when the image has loaded.

And if it doesn’t fire then you’re left looking at the spinner forever…

See the docs for the jQuery load event —

Caveats of the load event when used with images

A common challenge developers attempt to solve using the .load() shortcut is to execute a function when an image (or collection of images) have completely loaded. There are several known caveats with this that should be noted. These are:

• It doesn’t work consistently nor reliably cross-browser
• It doesn’t fire correctly in WebKit if the image src is set to the same src as before
• It doesn’t correctly bubble up the DOM tree
• Can cease to fire for images that already live in the browser’s cache