Question

我有一个包含视频信息（标题，链接）的对象，我打算使用它们，包括附加到HTML元素<div id="videos"></div>的gif src链接。我的代码工作，见下文，但发生的事情是，因为我有8个不同的GIF同时运行，实际上46但是为了这个例子我只使用8，页面不断加载它似乎最终崩溃。

问题：

我应该使用ajax来加载这些信息吗？

我的当前对象格式是否正确与ajax一起使用？

如果我正在使用ajax并且一旦所有的GIF都被加载，希望所有的46，页面将停止加载，防止它有希望崩溃。

我正在学习，因此我会非常感谢所有这类功能的最佳实践或行业标准！

Fiddle - 这个只有3个视频，因为8个我一直撞到小提琴窗口 - 我最初有46个，这导致页面立即崩溃！

JavaScript代码

var dataCollection = {
    'videoData': [
      {
        'id'      : 0,
        'title'   : 'Badminton',
        'company' : 'Pepto Bismol',
        'gifLink' : 'http://reneinla.com/kris/gifs/BadmintonPeptoBismolCommercial.gif',
        'srcMp4'  : 'http://reneinla.com/kris/videos/BadmintonPeptoBismolCommercial.m4v',
        'srcWebm' : 'http://reneinla.com/kris/videos/BadmintonPeptoBismolCommercial.webm',
        'srcOgv'  : 'http://reneinla.com/kris/videos/BadmintonPeptoBismolCommercial.ogv',
        'poster'  : 'http://reneinla.com/kris/videos/BadmintonPeptoBismolCommercial.jpg'
      },
      {
        'id'      : 1,
        'title'   : 'Home Brewer',
        'company' : 'Buffalo Wild Wings',
        'gifLink' : 'http://reneinla.com/kris/gifs/BuffaloWildWingsHomeBrewer.gif',
        'srcMp4'  : 'http://reneinla.com/kris/videos/BuffaloWildWingsHomeBrewer.m4v',
        'srcWebm' : 'http://reneinla.com/kris/videos/BuffaloWildWingsHomeBrewer.webm',
        'srcOgv'  : 'http://reneinla.com/kris/videos/BuffaloWildWingsHomeBrewer.ogv',
        'poster'  : 'http://reneinla.com/kris/videos/BuffaloWildWingsHomeBrewer.jpg'
      },
      {
        'id'      : 2,
        'title'   : 'Directly to Fabulous',
        'company' : 'California Lottery',
        'gifLink' : 'http://reneinla.com/kris/gifs/CaliforniaLottoMonopolyGoDirectlytoFabulous.gif',
        'srcMp4'  : 'http://reneinla.com/kris/videos/CaliforniaLottoMonopolyGoDirectlytoFabulous.m4v',
        'srcWebm' : 'http://reneinla.com/kris/videos/CaliforniaLottoMonopolyGoDirectlytoFabulous.webm',
        'srcOgv'  : 'http://reneinla.com/kris/videos/CaliforniaLottoMonopolyGoDirectlytoFabulous.ogv',
            'poster'  : 'http://reneinla.com/kris/videos/CaliforniaLottoMonopolyGoDirectlytoFabulous.jpg'
      }
    ]
};

$(function() {
  var videos = $('#video');
    for (var i = 0; i < dataCollection.videoData.length; i++) {
    var obj = dataCollection.videoData[i];
    //console.log(obj.gifLink);
    videos.append('<div class="col-sm-12 col-md-3 video-thumbs"><img src="' + obj.gifLink + '"/></div>');
  }
});

HTML

<div class="container row">
   <div id="videos"></div>
</div>

将包含gif的Javascript对象加载到HTML中

0 个答案: