jquery - 如何使用背景位置创建加载图像 Sprite

Question

我希望创建一个加载 Sprite ，它适用于所有浏览器，因为当前 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;
}

这是一个 fiddle 来展示我到目前为止所得到的:

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

我感觉动画不工作是因为我设置背景位置的方式有问题 - 以前有没有其他人做过类似的事情？ 我以前看过其他插件，但我希望到目前为止我所拥有的几乎就是我所需要的，因此我真的不想包含第 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/

一定要在关键帧和动画之前插入您喜欢的浏览器前缀。