diff --git a/dashboard-ui/css/librarybrowser.css b/dashboard-ui/css/librarybrowser.css index a65d8a37dc..e97f9d215b 100644 --- a/dashboard-ui/css/librarybrowser.css +++ b/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 { diff --git a/dashboard-ui/scripts/librarybrowser.js b/dashboard-ui/scripts/librarybrowser.js index 6c18da00f3..c94937596f 100644 --- a/dashboard-ui/scripts/librarybrowser.js +++ b/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 += '