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

回答

相關問題