JavaScript对象加载内容到DOM

我想弄清楚，如果我的代码是让我的网页加载永久或如果它不断通过我的javascript对象迭代。我有一个包含46个条目的对象，其中46个图像也作为模态触发器，应该在页面加载后自动加载。该页面正在加载一半的图像，并没有加载其余的。图像的文件大小最小，最多97kb。在对象中链接的视频确实达到了9MB，但我假设它们没有被加载，直到点击事件被触发。我是对的？我应该使用ajax加载视频内容吗？或者是我的JavaScript代码的罪魁祸首？我试图尽可能地学习，所以任何想法/建议都欢迎和非常感谢！JavaScript对象加载内容到DOM

live site | fiddle with same code

的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>

来源

2015-07-21 user2647510

你能尝试删除'预紧= “自动”'？小提琴似乎工作正常，但这可能是因为你只包括3个元素。 – Cerbrus

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

我检查了Chrome网络标签打开的Chrome开发工具的实时网站，并且mp4文件肯定是即使您没有点击图片，也会下载。 – AndrewR

试试这个

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>');

来源

2015-07-23 06:30:09 venkat7668

JavaScript对象加载内容到DOM

回答

相关问题