Javascript HTML5视频交换与GIF

所以我对JQuery和Javascript比较陌生，但对弗兰肯斯坦有基本的理解和能力。我有一个丑陋的脚本，工作得很好，除了它的加载时间变得疯狂。目前，我有一个HTML5视频，将动画显示为全屏背景，随着网站缩小到手机大小，我的想法是将HTML5视频替换为1秒GIF序列，以避免iOS对自动播放的限制。我目前有一个脚本，它每秒将身体的背景图像交换到下一个GIF，但是1秒的GIF序列仍然运行在1mb以上，并在加载时造成大量空白。大约有30个GIF序列，每个序列运行1s。是否有一种简单的方法可以预加载GIF并在GIF准备就绪时显示它们，还是有更好的选择？可能在显示前预加载其中5个，然后在可用时一次加载一个。有没有办法只在特定的窗口大小下使用脚本，并加载较低分辨率的gif序列，直到较高分辨率的gif序列可用*编辑：GIF将缩小尺寸

$(function() {
var body = $('body');
var backgrounds = ['url(mike-gif-1-oo.gif) no-repeat center center fixed',   'url(mike-gif-2-oo.gif) no-repeat center center fixed','url(mike-gif-3-oo.gif)   no-repeat center center fixed','url(mike-gif-4-oo.gif) no-repeat center center   fixed','url(mike-gif-5-oo.gif) no-repeat center center fixed','url(mike-gif-6-   oo.gif) no-repeat center center fixed','url(mike-gif-7-oo.gif) no-repeat center center fixed','url(mike-gif-8-oo.gif) no-repeat center center fixed','url(mike-gif-9-oo.gif) no-repeat center center fixed','url(mike-gif-10-oo.gif) no-repeat center center fixed','url(mike-gif-11-oo.gif) no-repeat center center fixed','url(mike-gif-12-oo.gif) no-repeat center center fixed','url(mike-gif-13-oo.gif) no-repeat center center fixed','url(mike-gif-14-oo.gif) no-repeat center center fixed'];
var current = 0;

function nextBackground() {
 body.css(
'background',
 backgrounds[current = ++current % backgrounds.length]
 );
  body.css({'-webkit-background-size': 'cover',
  '-moz-background-size': 'cover',
    '-o-background-size': 'cover',
    'background-size': 'cover' });

  setTimeout(nextBackground, 1000);
  }
 setTimeout(nextBackground, 1000);
 body.css('background', backgrounds[0]);
 body.css({'-webkit-background-size': 'cover',
 '-moz-background-size': 'cover',
    '-o-background-size': 'cover',
    'background-size': 'cover' });
   });

---

那么，仅GIF的重量就超过30 MB？在手机上？O_oIs设置静态图像（在手机上）不是选项吗？我认为这将是“避免iOS对autoplay的限制”的方法——这些限制的一个原因是，保护用户不被自动下载视频这样大的资源……而现在你正试图通过使用不同的格式和同样大的下载量来绕过这一点…？告诉用户“我不会对什么对你最合适”的方法……好吧，我们的计划是将GIF缩小到适合移动设备的合理尺寸。它们目前超过1MB的原因是它们取代了全尺寸的HTML5视频。我还计划将GIF的数量减少到10-15个，但这仍然会使我在移动网络上播放GIF时出现空白，这是GIF首次播放。