如何添加加载“微调器”

Question

我有一些非常简单的js（我仍在学习），它基本上读取表单的元素并创建一个传递到图像服务器的url字符串，然后渲染图像。

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

我试图弄清楚如何显示这样的简单加载程序（http://fgnass.github.com/spin.js/#v1.2.5）。如何向 setJPG() 函数添加一些内容，以便每次初始化时都会弹出加载程序，然后在加载图像后消失？

Answer 1

你们让这种方式变得比需要的更加复杂。将图像放入 div 中，并将 div 的背景设置为动画 gif。

<div style="background-image: url('spinner.gif')"><img src='bigImage.jpg'></div>

根本不需要使用任何 JS，图像将简单地加载到背景微调器上。