0

我做了一些研究，显然调用从队列中预加载元素的函数被触发了两次（一次来自缓存）。（我已经检查过，每个元素只添加到队列中一次。）

但是，这会导致创建两个视频元素，因为我已将它们添加到处理队列中文件的函数中的文档中。（基本上，我正在创建一堆高度为 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);
   }
 }
4

0 回答 0