1
0
Fork 0
mirror of https://github.com/jellyfin/jellyfin-web synced 2025-03-30 19:56:21 +00:00

Lazy loading enabled

All pages with lots of images now have lazy loading enabled. The
"animation" was removed since it made for a bit of an odd experience one
the 2nd visit to a page. On pages with lots of images this has a nice
impact as it only loads the images that the user can see initially. As a
user scrolls it loads the next ones up. It saves a lot of extra requests
initially.
This commit is contained in:
Tim Hobbs 2014-04-09 20:47:57 -07:00
parent ab0941be90
commit f893f175cb
11 changed files with 41 additions and 31 deletions

View file

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

View file

@ -34,7 +34,8 @@
showTitle: true, showTitle: true,
showParentTitle: true, showParentTitle: true,
overlayText: true, overlayText: true,
selectionPanel: true selectionPanel: true,
lazy: true
}); });
$('.itemsContainer', page).removeClass('timelineItemsContainer'); $('.itemsContainer', page).removeClass('timelineItemsContainer');

View file

@ -33,7 +33,8 @@
shape: "portrait", shape: "portrait",
context: 'movies', context: 'movies',
showTitle: true, showTitle: true,
centerText: true centerText: true,
lazy: true
}); });
html += LibraryBrowser.getPagingHtml(query, result.TotalRecordCount); html += LibraryBrowser.getPagingHtml(query, result.TotalRecordCount);

View file

@ -34,7 +34,8 @@
context: 'movies', context: 'movies',
showTitle: true, showTitle: true,
showItemCounts: true, showItemCounts: true,
coverImage: true coverImage: true,
lazy: true
}); });
html += LibraryBrowser.getPagingHtml(query, result.TotalRecordCount, false, [], false); html += LibraryBrowser.getPagingHtml(query, result.TotalRecordCount, false, [], false);

View file

@ -35,7 +35,8 @@
shape: "backdrop", shape: "backdrop",
preferThumb: true, preferThumb: true,
context: 'movies', context: 'movies',
selectionPanel: true selectionPanel: true,
lazy: true
}); });
$('.itemsContainer', page).removeClass('timelineItemsContainer'); $('.itemsContainer', page).removeClass('timelineItemsContainer');
} }
@ -45,7 +46,8 @@
items: result.Items, items: result.Items,
shape: "banner", shape: "banner",
preferBanner: true, preferBanner: true,
context: 'movies' context: 'movies',
lazy: true
}); });
$('.itemsContainer', page).removeClass('timelineItemsContainer'); $('.itemsContainer', page).removeClass('timelineItemsContainer');
} }
@ -69,7 +71,8 @@
showTitle: true, showTitle: true,
timeline: true, timeline: true,
centerText: true, centerText: true,
selectionPanel: true selectionPanel: true,
lazy: true
}); });
$('.itemsContainer', page).addClass('timelineItemsContainer'); $('.itemsContainer', page).addClass('timelineItemsContainer');
} }
@ -384,12 +387,4 @@
updateFilterControls(this); updateFilterControls(this);
}); });
$(function () {
$("body").on("create", function () {
$(".lazy").unveil(200, function () {
this.style.opacity = 1;
});
});
});
})(jQuery, document); })(jQuery, document);

View file

@ -32,7 +32,8 @@
context: 'music', context: 'music',
showTitle: true, showTitle: true,
coverImage: true, coverImage: true,
centerText: true centerText: true,
lazy: true
}); });
html += LibraryBrowser.getPagingHtml(query, result.TotalRecordCount); html += LibraryBrowser.getPagingHtml(query, result.TotalRecordCount);

View file

@ -31,7 +31,8 @@
context: 'music', context: 'music',
showTitle: true, showTitle: true,
coverImage: true, coverImage: true,
centerText: true centerText: true,
lazy: true
}); });
html += LibraryBrowser.getPagingHtml(query, result.TotalRecordCount); html += LibraryBrowser.getPagingHtml(query, result.TotalRecordCount);
@ -119,4 +120,10 @@
updateFilterControls(this); updateFilterControls(this);
}); });
$(function () {
$("body").on("create", function () {
$(".lazy").unveil(200);
});
});
})(jQuery, document); })(jQuery, document);

View file

@ -32,7 +32,8 @@
preferThumb: true, preferThumb: true,
context: 'music', context: 'music',
showItemCounts: true, showItemCounts: true,
centerText: true centerText: true,
lazy: true
}); });
html += LibraryBrowser.getPagingHtml(query, result.TotalRecordCount); html += LibraryBrowser.getPagingHtml(query, result.TotalRecordCount);
@ -55,8 +56,8 @@
reloadItems(page); reloadItems(page);
}); });
LibraryBrowser.saveQueryValues('musicgenres', query); LibraryBrowser.saveQueryValues('musicgenres', query);
Dashboard.hideLoadingMsg(); Dashboard.hideLoadingMsg();
}); });
} }

View file

@ -1386,6 +1386,10 @@ $(function () {
ApiClient.closeWebSocket(); ApiClient.closeWebSocket();
} }
}); });
$("body").on("create", function () {
$(".lazy").unveil(200);
});
}); });
Dashboard.jQueryMobileInit(); Dashboard.jQueryMobileInit();
@ -1427,5 +1431,4 @@ $(document).on('pagebeforeshow', ".page", function () {
if (!ApiClient.isWebSocketOpen()) { if (!ApiClient.isWebSocketOpen()) {
Dashboard.refreshSystemInfoFromServer(); Dashboard.refreshSystemInfoFromServer();
} }
}); });

View file

@ -34,7 +34,8 @@
context: 'tv', context: 'tv',
showTitle: true, showTitle: true,
showItemCounts: true, showItemCounts: true,
coverImage: true coverImage: true,
lazy: true
}); });
html += LibraryBrowser.getPagingHtml(query, result.TotalRecordCount, false, [], false); html += LibraryBrowser.getPagingHtml(query, result.TotalRecordCount, false, [], false);

View file

@ -34,7 +34,8 @@
items: result.Items, items: result.Items,
shape: "backdrop", shape: "backdrop",
preferThumb: true, preferThumb: true,
context: 'tv' context: 'tv',
lazy: true
}); });
$('.itemsContainer', page).removeClass('timelineItemsContainer'); $('.itemsContainer', page).removeClass('timelineItemsContainer');
@ -45,7 +46,8 @@
items: result.Items, items: result.Items,
shape: "banner", shape: "banner",
preferBanner: true, preferBanner: true,
context: 'tv' context: 'tv',
lazy: true
}); });
$('.itemsContainer', page).removeClass('timelineItemsContainer'); $('.itemsContainer', page).removeClass('timelineItemsContainer');
} }
@ -56,7 +58,8 @@
shape: "portrait", shape: "portrait",
context: 'tv', context: 'tv',
showTitle: true, showTitle: true,
centerText: true centerText: true,
lazy: true
}); });
$('.itemsContainer', page).removeClass('timelineItemsContainer'); $('.itemsContainer', page).removeClass('timelineItemsContainer');
} }
@ -67,7 +70,8 @@
shape: "portrait", shape: "portrait",
context: 'tv', context: 'tv',
timeline: true, timeline: true,
showTitle: true showTitle: true,
lazy: true
}); });
$('.itemsContainer', page).addClass('timelineItemsContainer'); $('.itemsContainer', page).addClass('timelineItemsContainer');