私はいくつかの調査を行いましたが、キューから要素をプリロードするために呼び出される関数が2回(キャッシュから1回)起動されるようです。(私はすでにチェックしており、各要素は一度だけキューに追加されます。)
ただし、これにより、キューからのファイルを処理する関数でドキュメントに追加されるため、2 つのビデオ要素が作成されます。(基本的には高さ0pxの動画をまとめて作っており、順次公開していく予定ですが、動画ごとに重複してしまいます。)
var onPreloadFile = function(event) {
var item = event.item; // A reference to the item that was passed in to the LoadQueue
var type = item.type;
if (type == 'video') {
var video = document.createElement('video');
video.src = item.src;
video.setAttribute('class', item.css_class + ' vidStim');
video.setAttribute('style', 'height: 0px');
document.body.children.videoContainer.appendChild(video);
}
}
重複がないように、この問題を修正するにはどうすればよいですか? (注 - 同じビデオを後で再び表示する可能性があるため、以前に追加したことのない子のみを追加することはできません。)
更新:これで問題は解決しましたが、それが悪い習慣かどうかはわかりません。
var alreadyInstalled = []; //array for vids I put in the document
var onPreloadFile = function(event) {
var item = event.item; // A reference to the item that was passed in to the LoadQueue
var type = item.type;
if (type == 'video') {
var video = document.createElement('video');
video.src = item.src;
video.setAttribute('class', item.css_class + ' vidStim');
video.setAttribute('style', 'height: 0px');
if (alreadyInstalled.length > 0){
//checking previous vid to see if it was the same one. this works because i'm assuming the two duplicate firing happen one after the other. is this always the case?
if (alreadyInstalled[alreadyInstalled.length-1] != video.src) {
alreadyInstalled.push(video.src);
document.body.children.videoContainer.appendChild(video);
}
else {
alreadyInstalled.push(video.src);
document.body.children.videoContainer.appendChild(video);
}
document.body.children.videoContainer.appendChild(video);
}
}