Question

我希望创建一个可以在所有浏览器上运行的加载精灵，因为当调用新页面时，IE将在.gif文件中停止动画。

到目前为止我有这个功能：

counter = 1;              //how many slides have we seen

function loadingWheel(loc) {
    var img = $('.img_working'),  //this is the div with the sprite
        slideCount = 76,          //this is so that we know when to stop
        slideH = 32,              //this is the height of each frame in the sprite
        pos = loc,                //this is the current y position
        newPos = pos + slideH;    //now we increase the position to set the css


    //set the new css position
    img.css({ 'background-position': 'center -' + newPos + 'px' });

    //Add to the count
    counter++; 

    //if we are the the last slide, we are going to reset the counter
    if (counter == slideCount) {

        //reset the position, wait for 700 ms then go again
        setTimeout(loadingWheel(0), 700);
    }
    else {
        //wait for 700 ms then go again
        setTimeout(loadingWheel(newPos), 700);     
    }  
};

loadingWheel(0);

我的想法是使用setTimeout来创建一个循环，它将传递当前位置然后再增加它，然后再次调用。

到目前为止HTML和CSS很简单：

<div id="workingMessage">
    <div class="img_working"></div>
</div>

.img_working {
    width:32px;
    height:32px;
    margin:0 auto 20px;
    background: url(http://i.imgur.com/Hwgkxhy.png) top center no-repeat;
}

这是一个显示我到目前为止所得到的小提琴：

http://jsfiddle.net/uLycs/3/

我感觉动画因为我设置背景位置的方式有问题而无法正常工作 - 还有其他人之前做过这样的事吗？我之前看过其他插件，但我希望到目前为止我所拥有的只是我需要的所有内容，因此我不想真的想要包含第三方插件。

Answer 1

为了好玩，我决定制作一个纯粹的css实现。

HTML：

<div class="img_working"></div>

的CSS：

@keyframes scroll-background {
    from {
        background-position: 0% 0%;
    }
    to {
        background-position: 0% 100%;
    }
}

.img_working {
    width:32px;
    height:32px;
    background-image: url(http://i.imgur.com/Hwgkxhy.png);

    animation: scroll-background steps(75, end) infinite 2.4s;
}

http://jsfiddle.net/82h2hbaa/

请务必在keyframes和animation之前插入您喜爱的浏览器前缀。

Answer 2

问题来自于您如何调用setTimeout。 setTimeout的syntax为：

var timeoutID = window.setTimeout(func, delay, [param1, param2, ...]);

在当前版本的代码中，在设置超时之前评估了loadingWheel，这会导致无限递归。为了在指定的时间后对loadingWheel进行评估，请按以下方式调用：

setTimeout(loadingWheel, 700, newPos);

如何使用背景位置创建加载图像精灵

2 个答案: