JS加载所有完成再加载animation动画

JS加载全部完成再加载animation动画
这是我的网址 http:www.tisoz.com/ 直接进入就可以看出问题来了,因为图片不能一开始就加载完成,所以动画效果在
图片加载之前就开始了,我想做的是,怎么让动画效果在图片加载完成后再显示出来

想使用的技术大概是这样:

图片加载完成后,所有的动画延时0.5S开始.当然是基于所有动画而言:举个例子:
animation:run1 2s ease-out 0.5s forwards;
animation:run2 5s ease-out 4s forwards;
他们本身的delay属性不需要改变,而是图片加载出来之前一直不会开始,当图片加载成功后算上他们自身的delay
还有图片的加载后的延时应该是:
animation:run1 2s ease-out 1s forwards;
animation:run2 5s ease-out 4.5s forwards;
所有的animation在原来的delay基础上又增加了0.5s

当然有onload这个方法,但是却不知道如何实现在图片加载完之前,动画怎么不会开始。
而且我不想用onload之后再写animation属性,因为那样的话我本身的HTML动画有点多,而且我之前写的时候没考虑到这个层次;
所以现在再在JS中写这东西着实有点麻烦,求大神指点一下
------解决思路----------------------
你的动画是一个css3样式 是吧

那么 动画单独封装在一个class里面

onload之后 在赋予dom这个class

可以灵活使用class的添加删除来实现复杂逻辑和控制