Question

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

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

preloadjs - 加载两次火，但我想只保留一次？

0 个答案: