0

I did some research and apparently the function that gets called for preloading elements from the queue is fired twice (once from the cache). (I've already checked and each element is added to the queue only once.)

However, this results in two video elements being created, as I'm added them to my document in my function that handles files from the queue. (Basically, I'm creating a bunch of videos with height 0px, which I'm planning to show one by one later on. However, I end up with duplicates of each video.)

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

How can I go about fixing this problem so that I don't have duplicates? (Note -- there is the possibility I want the same video to show up again later on, so I can't only append children that I haven't appended before.)

UPDATE: This fixes my problem, but I don't know if it's bad practice.

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);
   }
 }
pomegranate
  • 755
  • 5
  • 19
  • Does event.item have any sort of unique ID you can use? – JoLoCo Feb 21 '15 at 16:15
  • They don't. But there is the fact the two identical videos won't be shown twice in a row. So right now, I'm just checking to see if the previous video added to the document.body was the same one, and only adding it if it isn't. (I'm going to update my code above.) Not sure if this might be bad practice -- will the duplicates always fire one after the other? – pomegranate Feb 21 '15 at 16:28
  • Your added solution is similar to what I was going to suggest! If each item had an ID, you could add it to an array, then check to see if it already exists. For that, you'll need an "in_array" function: http://stackoverflow.com/questions/784012/javascript-equivalent-of-phps-in-array – If each item has a 'src' perhaps you could use that as an ersatz ID instead? – JoLoCo Feb 21 '15 at 17:39
  • I had this problem too until I realised that the second load request was actually from the cache, sort of like a blob. Did you check if that was true with your case? If you're debugging in Chrome and you keep "disable cache" on, then the video will get downloaded twice. – Parth Dec 22 '16 at 05:55

0 Answers0