JavaScript对象将内容加载到DOM中。

Question

我正在尝试确定我的代码是使页面永远加载还是在不断地迭代JavaScript对象。我有一个包含46个条目的对象，其中46个图像也充当模态触发器，应该在页面加载时自动加载。页面只加载了一半的图像并且没有加载剩下的图像。图像文件的大小很小，最多为97kb。对象中链接的视频大小可达9mb，但我认为它们直到点击事件被触发才会被加载。我是正确的吗？我应该使用ajax加载视频内容吗？或者我的JavaScript代码是罪魁祸首？我正在努力学习尽可能多的知识，因此欢迎任何想法/建议！

现场演示 | fiddle与相同的代码

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.mp4',
      'srcWebm' : 'http://reneinla.com/kris/videos/BadmintonPeptoBismolCommercial.webm',
      'srcOgv'  : 'http://reneinla.com/kris/videos/BadmintonPeptoBismolCommercial.ogv',
      'poster'  : 'http://reneinla.com/kris/videos/BadmintonPeptoBismolCommercial.jpg'
      },
      { ...
     ]
    };

var videos = $('#video');
var modalContent = $('#video-modal');

var appendVideo = function(videoObj) {
  var poster = videoObj.poster;
  var srcMp4 = videoObj.srcMp4;
  var srcWebm = videoObj.srcWebm;
  var srcOgv = videoObj.srcOgv;
  var video = $('<div class="video col-sm-12 col-md-3"><img src="' + poster + '" data-title="' + videoObj.title + '" data-toggle="modal" data-target="#myModal"/></div>');

  var videoPlayer = $('<video preload="auto" controls><source src="' + srcMp4 + '" type="video/mp4;"><source src="' + srcWebm + '" type="video/webm;"><source src="' + srcOgv + '" type="video/ogv;"></video>');
  videos.append(video);

video.find('img').click(function(e) {
  modalContent.append(videoPlayer);
  // debug
  // alert(videoObj.srcMp4);
  // console.log(videoObj.srcMp4);
});

$('#myModal, .close').on('click', function(){
  modalContent.find('video').remove();
});

$('.myHTMLvideo').click(function() {
    $(this).get(0).paused ? $(this).get(0).play() : $(this).get(0).pause();
  });
};

for (var i = 0; i < dataCollection.videoData.length; i++) {
  var obj = dataCollection.videoData[i];
    appendVideo(obj);
}

HTML

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

<div id="myModal" class="modal fade" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content">
      <button type="button" class="close" data-dismiss="modal">&times;</button>
      <div class="modal-body" id="video-modal"></div>
    </div>
  </div>
</div>

- user2647510

---

你能试着移除 preload="auto" 吗？这个 Fiddle 看起来工作正常，但那可能是因为你只包含了3个元素。 - Cerbrus

我认为这是因为它只有3个元素。我已经更新了现场网站，但它仍在加载...浏览器窗口底部显示“正在处理请求...” - user2647510

尝试使用video preload="none"。 - Mark Wade

@MarkWade - 成功了！我一直以为如果你不包含它，它就不会加载视频...我学到了教训！再次感谢！ - user2647510

@Xufox - 你能告诉我你是如何发现与x（close）相关的46个事件的吗？有没有其他的方法可以编写这个脚本，以便它不会创建46个事件？ - user2647510

Answer 1

试一下

var videoPlayer = $('<video preload="none" controls><source src="' + srcMp4 + '" type="video/mp4;"><source src="' + srcWebm + '" type="video/webm;"><source src="' + srcOgv + '" type="video/ogv;"></video>');

- venkat7668