locked
Memory Leak in ListView RRS feed

  • Question

  • I am trying to add videos to a listView. I need to dynamically add and remove videos. Everything works fine, but in the background the memory footprint keeps increasing as I add new videos and the app crashes after some time. I am posting my code below, and the different options I tried out so far.

    HTML Code

    <!--Template-->
    <div class="itemtemplate" data-win-control="WinJS.Binding.Template">
    	<video class="VideoClip" controls autoplay muted loop>
           	<source data-win-bind="src: videoSrc" type="video/mp4" />
           </video>
    </div>
    
    <!--Video List-->
    <div class="videoList" aria-label="List of groups" data-win-control="WinJS.UI.ListView" data-win-options="{selectionMode: 'none'}" ></div>

    JAVASCRIPT

    //Fetch videoList From UI
    var videoList = element.querySelector(".videoList").winControl;
    //Bind the template to the List
    videoList.itemTemplate = element.querySelector(".itemtemplate");
    
    //Create a new binding list (New Data Source)
    var listOfVideos = new WinJS.Binding.List();
    
    //Get all the videos from a particular folder asynchronously mplate 
    folder.getItemsAsync().then(function (items)
    {
    	for (var itemCount = 0; itemCount < items.length; itemCount++)
    	{
    		var data = new Object();
         		data.videoSrc = URL.createObjectURL(items[itemCount]);
           	listOfVideos.push(data);
    	}
    }
    
    //Connect the binding list and list view
    videoList.itemDataSource = listOfVideos.dataSource;
    

    So far, everything works fine. I have all the videos displayed and playing. However if I want to change the items in the ListView, the memory held by the ListView is not released. As I keep adding items the memory keeps increasing (as viewed through task manager). When I remove items, the memory isn't freed. After some time the app crashes.

    Here are the different things I tried, but didnt see the memory released.

    Option 1: Pop all the videos

    listOfVideos.pop();

    Option 2: set the binding list object to null

    listOfVideos = null;

    Option 3: Get each <video> from the DOM and release the URL

    URL.revokeObjectURL(childToBeRemoved.src);

    Option 4: Get each <video> from the DOM and set the src to null

    Option 5: Get the parent DOM element and remove the child videos

    Used empty <div> objects in the template instead of videos. Then tried to programatically add the videos to the divs This worked fine, but after removing the child videos from the div, the memory wasn't released.

    Tuesday, July 17, 2012 4:46 PM

Answers