From be9ec5a86a7dbd5a1638e176359863acc1a70261 Mon Sep 17 00:00:00 2001
From: j <0x006A@0x2620.org>
Date: Sun, 2 Feb 2014 18:48:45 +0000
Subject: [PATCH] load timeline overlays(subtitles, cuts, results) more
 asynchronously

---
 source/Ox.UI/js/Video/LargeVideoTimeline.js   | 16 +++++++-------
 .../Ox.UI/js/Video/SmallVideoTimelineImage.js | 21 +++++++++++--------
 2 files changed, 21 insertions(+), 16 deletions(-)

diff --git a/source/Ox.UI/js/Video/LargeVideoTimeline.js b/source/Ox.UI/js/Video/LargeVideoTimeline.js
index f012a469..88648489 100644
--- a/source/Ox.UI/js/Video/LargeVideoTimeline.js
+++ b/source/Ox.UI/js/Video/LargeVideoTimeline.js
@@ -71,7 +71,7 @@ Ox.LargeVideoTimeline = function(options, self) {
         .css({left: self.center + 'px'})
         .appendTo(that);
 
-    setSubtitles();
+    setTimeout(setSubtitles);
 
     if (self.options.showInToOut) {
         if (self.options['in']) {
@@ -94,13 +94,15 @@ Ox.LargeVideoTimeline = function(options, self) {
         }
     }
 
-    self.options.cuts.forEach(function(v, i) {
-        self.$cuts[i] = $('<img>')
-            .addClass('OxCut')
-            .css({left: (v * self.fps) + 'px'})
-            .appendTo(self.$timeline);
+    setTimeout(function() {
+        self.options.cuts.forEach(function(v, i) {
+            self.$cuts[i] = $('<img>')
+                .addClass('OxCut')
+                .css({left: (v * self.fps) + 'px'})
+                .appendTo(self.$timeline);
+        });
+        self.$timeline.find('.OxCut').attr({src: Ox.UI.getImageURL('markerCut')});
     });
-    self.$timeline.find('.OxCut').attr({src: Ox.UI.getImageURL('markerCut')});
 
     self.$markerPosition = $('<img>')
         .addClass('OxMarkerPosition')
diff --git a/source/Ox.UI/js/Video/SmallVideoTimelineImage.js b/source/Ox.UI/js/Video/SmallVideoTimelineImage.js
index 92f5c750..b74839bb 100644
--- a/source/Ox.UI/js/Video/SmallVideoTimelineImage.js
+++ b/source/Ox.UI/js/Video/SmallVideoTimelineImage.js
@@ -138,9 +138,6 @@ Ox.SmallVideoTimelineImage = function(options, self) {
     }
 
     self.$subtitles = $('<img>')
-        .attr({
-            src: getImageURL('subtitles')
-        })
         .css({
             position: 'absolute',
             top: self.imageTop + 'px',
@@ -150,9 +147,6 @@ Ox.SmallVideoTimelineImage = function(options, self) {
         .appendTo(that);
 
     self.$results = $('<img>')
-        .attr({
-            src: getImageURL('results')
-        })
         .css({
             position: 'absolute',
             top: self.imageTop + 'px',
@@ -162,9 +156,6 @@ Ox.SmallVideoTimelineImage = function(options, self) {
         .appendTo(that);
 
     self.$selection = $('<img>')
-        .attr({
-            src: getImageURL('selection')
-        })
         .css({
             position: 'absolute',
             top: self.imageTop + 'px',
@@ -172,6 +163,18 @@ Ox.SmallVideoTimelineImage = function(options, self) {
             height: self.imageHeight + 'px'
         })
         .appendTo(that);
+    
+    setTimeout(function() {
+        self.$subtitles.attr({
+            src: getImageURL('subtitles')
+        });
+        self.$results.attr({
+                src: getImageURL('results')
+        });
+        self.$selection.attr({
+            src: getImageURL('selection')
+        });
+    });
 
     function getClipTimeline() {
         var $canvas, context, image,