javascript - 如何添加加载 "spinner"

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，图像将简单地加载到背景微调器上。