Enabled lazy load of poster images

This should make initial load of the movies page a little more
responsive for larger libraries. This can be used on any page loading
images.

dashboard-ui/css/librarybrowser.css

@@ -1144,6 +1144,11 @@ a.itemTag:hover {
     margin-left: .5em;
 }
 
+.lazy {
+    opacity: 0;
+    transition: opacity .3s ease-in;
+}
+
 @media all and (min-height: 500px) {
 
     .alphabetPicker {

dashboard-ui/scripts/librarybrowser.js

@@ -433,6 +433,8 @@
 
             options.shape = options.shape || "portrait";
 
+            options.lazy = options.lazy || false;
+
             var html = "";
 
             var primaryImageAspectRatio = options.shape == 'auto' ? LibraryBrowser.getAveragePrimaryImageAspectRatio(items) : null;
@@ -668,7 +670,7 @@
 
                 var style = "";
 
-                if (imgUrl) {
+                if (imgUrl && !options.lazy) {
                     style += 'background-image:url(\'' + imgUrl + '\');';
                 }
 
@@ -681,9 +683,16 @@
                     imageCssClass += " coveredPosterItemImage";
                 }
 
+                var dataSrc = "";
+
+                if (options.lazy) {
+                    imageCssClass += " lazy";
+                    dataSrc = ' data-src="' + imgUrl + '"';
+                }
+
                 var progressHtml = options.showProgress === false ? '' : LibraryBrowser.getItemProgressBarHtml(item);
 
-                html += '<div class="' + imageCssClass + '" style="' + style + '">';
+                html += '<div class="' + imageCssClass + '" style="' + style + '"' + dataSrc + '>';
 
                 html += '<div class="posterItemOverlayTarget"></div>';
 

dashboard-ui/scripts/movies.js

@@ -56,7 +56,8 @@
                     context: 'movies',
                     showTitle: true,
                     centerText: true,
-                    selectionPanel: true
+                    selectionPanel: true,
+                    lazy: true
                 });
                 $('.itemsContainer', page).removeClass('timelineItemsContainer');
             }
@@ -383,4 +384,12 @@
         updateFilterControls(this);
     });
 
+    $(function () {
+        $("body").on("create", function () {
+            $(".lazy").unveil(200, function () {
+                this.style.opacity = 1;
+            });
+        });
+    });
+
 })(jQuery, document);

dashboard-ui/thirdparty/jquery.unveil-custom.js

@@ -0,0 +1,62 @@
+/**
+ * jQuery Unveil
+ * A very lightweight jQuery plugin to lazy load images
+ * http://luis-almeida.github.com/unveil
+ *
+ * Licensed under the MIT license.
+ * Copyright 2013 Luís Almeida
+ * https://github.com/luis-almeida
+ */
+
+; (function ($) {
+
+    $.fn.unveil = function (threshold, callback) {
+
+        var $w = $(window),
+            th = threshold || 0,
+            retina = window.devicePixelRatio > 1,
+            attrib = retina ? "data-src-retina" : "data-src",
+            images = this,
+            loaded;
+
+        this.one("unveil", function () {
+            var elemType = $(this).get(0).tagName;
+            var source = this.getAttribute(attrib);
+            source = source || this.getAttribute("data-src");
+            if (source) {
+                if (elemType === "DIV") {
+                    this.style.backgroundImage = "url('" + source + "')";
+                } else {
+                    this.setAttribute("src", source);
+                }
+                if (typeof callback === "function") callback.call(this);
+            }
+        });
+
+        function unveil() {
+            var inview = images.filter(function () {
+                var $e = $(this);
+                if ($e.is(":hidden")) return;
+
+                var wt = $w.scrollTop(),
+                    wb = wt + $w.height(),
+                    et = $e.offset().top,
+                    eb = et + $e.height();
+
+                return eb >= wt - th && et <= wb + th;
+            });
+
+            loaded = inview.trigger("unveil");
+            images = images.not(loaded);
+        }
+
+        $w.scroll(unveil);
+        $w.resize(unveil);
+
+        unveil();
+
+        return this;
+
+    };
+
+})(window.jQuery || window.Zepto);