css animation背景图切换在iOS下的bug

animation切换背景图在iOS的休眠转态重新唤醒时造成背景图为空

1. 首先遇到的问题

有个项目需要用css animation 来切换背景图，简单来说就是这样：

@keyframes toggle-bg{
    from{
         background-image: url(img/bg1.png);
    }
    to{
         background-image: url(img/bg2.png);
    }
}

正常情况下就是两张背景图在不断的切换，但是在iOS中只要此页面休眠（界面跳出去重新跳回来不刷新页面或者屏幕休眠）后重新唤醒时页面的背景图全部消失。但是在安卓机中完全没有这样的现象。

image

2.解决方法

此问题的解决方法其实很简单，不能用css的animation那咱就直接用js定时器改变背景图来搞定它，但是我不太喜欢直接在js中改变背景图，所以我通过切换类名方法改变背景图，具体如下：

/*css*/
.lottery{
        background-image: url(../../img/market/dragon/bg1.png);
}
.lottery.light{
    background-image: url(../../img/market/dragon/bg2.png);
}
/*js*/
setInterval(function(){
    $('.lottery').toggleClass('light');
 },500)

然鹅你以为这样就结束了？？你错了。。。。
如果你的页面内容很少加载很快，那么恭喜你，你的工作已经结束了，但是真正的项目中内容稍多，所以加载稍慢，于是会出现下面的情况：

image

原因是bg2还没有加载到就执行了定时器

3.解决图片没加载就执行定时器问题

这个就更简单了，用$(function(){})只是页面加载完毕，外链的内容不一定全部加载完毕。所以需要用到img.onload=function(){} 代码如下：

var img=new Image();
img.src='xxxxxx.png'
img.onload=function(){
    setInterval(function(){
        $('.lottery').toggleClass('light');
    },500)
}

之前用了window.onload方法去实现此功能，电脑端完好但是手机端还是会存在图片没有加载到的问题，因此放弃了window.onload方法。不过注意一个细节，window.onload方法在页面中只能用一次，所以千万不要写多个window.onload方法。$(function(){})没有要求，可以写多个都不影响。
至此，完美的解决了。

image

我的个人博客,有空来坐坐