Question

所以我对JQuery和Javascript相对较新，但对Frankenstein有基本的了解和能力。我有一个丑陋的脚本工作得很好，除了它的加载时间变得疯狂。目前，我有一个HTML5视频将动画显示为全屏背景，并且随着网站下降到移动大小，我们的想法是将HTML5视频交换为1秒的GIF序列，这些GIF序列交换掉以避免iOS对自动播放的限制。我目前有一个脚本，每秒将身体的背景图像交换到下一个GIF，但是1秒的GIF序列仍然在1mb以上运行，并且在加载时会产生大量空白。大约有30个GIF序列，每个序列运行1个。是否有一种简单的方法来预加载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进行HTML5视频交换

0 个答案: