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:
parent
ab0941be90
commit
f893f175cb
11 changed files with 41 additions and 31 deletions
|
@ -1144,11 +1144,6 @@ a.itemTag:hover {
|
|||
margin-left: .5em;
|
||||
}
|
||||
|
||||
.lazy {
|
||||
opacity: 0;
|
||||
transition: opacity .3s ease-in;
|
||||
}
|
||||
|
||||
@media all and (min-height: 500px) {
|
||||
|
||||
.alphabetPicker {
|
||||
|
|
|
@ -34,7 +34,8 @@
|
|||
showTitle: true,
|
||||
showParentTitle: true,
|
||||
overlayText: true,
|
||||
selectionPanel: true
|
||||
selectionPanel: true,
|
||||
lazy: true
|
||||
});
|
||||
|
||||
$('.itemsContainer', page).removeClass('timelineItemsContainer');
|
||||
|
|
|
@ -33,7 +33,8 @@
|
|||
shape: "portrait",
|
||||
context: 'movies',
|
||||
showTitle: true,
|
||||
centerText: true
|
||||
centerText: true,
|
||||
lazy: true
|
||||
});
|
||||
|
||||
html += LibraryBrowser.getPagingHtml(query, result.TotalRecordCount);
|
||||
|
|
|
@ -34,7 +34,8 @@
|
|||
context: 'movies',
|
||||
showTitle: true,
|
||||
showItemCounts: true,
|
||||
coverImage: true
|
||||
coverImage: true,
|
||||
lazy: true
|
||||
});
|
||||
|
||||
html += LibraryBrowser.getPagingHtml(query, result.TotalRecordCount, false, [], false);
|
||||
|
|
|
@ -35,7 +35,8 @@
|
|||
shape: "backdrop",
|
||||
preferThumb: true,
|
||||
context: 'movies',
|
||||
selectionPanel: true
|
||||
selectionPanel: true,
|
||||
lazy: true
|
||||
});
|
||||
$('.itemsContainer', page).removeClass('timelineItemsContainer');
|
||||
}
|
||||
|
@ -45,7 +46,8 @@
|
|||
items: result.Items,
|
||||
shape: "banner",
|
||||
preferBanner: true,
|
||||
context: 'movies'
|
||||
context: 'movies',
|
||||
lazy: true
|
||||
});
|
||||
$('.itemsContainer', page).removeClass('timelineItemsContainer');
|
||||
}
|
||||
|
@ -69,7 +71,8 @@
|
|||
showTitle: true,
|
||||
timeline: true,
|
||||
centerText: true,
|
||||
selectionPanel: true
|
||||
selectionPanel: true,
|
||||
lazy: true
|
||||
});
|
||||
$('.itemsContainer', page).addClass('timelineItemsContainer');
|
||||
}
|
||||
|
@ -384,12 +387,4 @@
|
|||
updateFilterControls(this);
|
||||
});
|
||||
|
||||
$(function () {
|
||||
$("body").on("create", function () {
|
||||
$(".lazy").unveil(200, function () {
|
||||
this.style.opacity = 1;
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
})(jQuery, document);
|
|
@ -32,7 +32,8 @@
|
|||
context: 'music',
|
||||
showTitle: true,
|
||||
coverImage: true,
|
||||
centerText: true
|
||||
centerText: true,
|
||||
lazy: true
|
||||
});
|
||||
|
||||
html += LibraryBrowser.getPagingHtml(query, result.TotalRecordCount);
|
||||
|
|
|
@ -31,7 +31,8 @@
|
|||
context: 'music',
|
||||
showTitle: true,
|
||||
coverImage: true,
|
||||
centerText: true
|
||||
centerText: true,
|
||||
lazy: true
|
||||
});
|
||||
|
||||
html += LibraryBrowser.getPagingHtml(query, result.TotalRecordCount);
|
||||
|
@ -119,4 +120,10 @@
|
|||
updateFilterControls(this);
|
||||
});
|
||||
|
||||
$(function () {
|
||||
$("body").on("create", function () {
|
||||
$(".lazy").unveil(200);
|
||||
});
|
||||
});
|
||||
|
||||
})(jQuery, document);
|
|
@ -32,7 +32,8 @@
|
|||
preferThumb: true,
|
||||
context: 'music',
|
||||
showItemCounts: true,
|
||||
centerText: true
|
||||
centerText: true,
|
||||
lazy: true
|
||||
});
|
||||
|
||||
html += LibraryBrowser.getPagingHtml(query, result.TotalRecordCount);
|
||||
|
|
|
@ -1386,6 +1386,10 @@ $(function () {
|
|||
ApiClient.closeWebSocket();
|
||||
}
|
||||
});
|
||||
|
||||
$("body").on("create", function () {
|
||||
$(".lazy").unveil(200);
|
||||
});
|
||||
});
|
||||
|
||||
Dashboard.jQueryMobileInit();
|
||||
|
@ -1428,4 +1432,3 @@ $(document).on('pagebeforeshow', ".page", function () {
|
|||
Dashboard.refreshSystemInfoFromServer();
|
||||
}
|
||||
});
|
||||
|
||||
|
|
|
@ -34,7 +34,8 @@
|
|||
context: 'tv',
|
||||
showTitle: true,
|
||||
showItemCounts: true,
|
||||
coverImage: true
|
||||
coverImage: true,
|
||||
lazy: true
|
||||
});
|
||||
|
||||
html += LibraryBrowser.getPagingHtml(query, result.TotalRecordCount, false, [], false);
|
||||
|
|
|
@ -34,7 +34,8 @@
|
|||
items: result.Items,
|
||||
shape: "backdrop",
|
||||
preferThumb: true,
|
||||
context: 'tv'
|
||||
context: 'tv',
|
||||
lazy: true
|
||||
});
|
||||
|
||||
$('.itemsContainer', page).removeClass('timelineItemsContainer');
|
||||
|
@ -45,7 +46,8 @@
|
|||
items: result.Items,
|
||||
shape: "banner",
|
||||
preferBanner: true,
|
||||
context: 'tv'
|
||||
context: 'tv',
|
||||
lazy: true
|
||||
});
|
||||
$('.itemsContainer', page).removeClass('timelineItemsContainer');
|
||||
}
|
||||
|
@ -56,7 +58,8 @@
|
|||
shape: "portrait",
|
||||
context: 'tv',
|
||||
showTitle: true,
|
||||
centerText: true
|
||||
centerText: true,
|
||||
lazy: true
|
||||
});
|
||||
$('.itemsContainer', page).removeClass('timelineItemsContainer');
|
||||
}
|
||||
|
@ -67,7 +70,8 @@
|
|||
shape: "portrait",
|
||||
context: 'tv',
|
||||
timeline: true,
|
||||
showTitle: true
|
||||
showTitle: true,
|
||||
lazy: true
|
||||
});
|
||||
|
||||
$('.itemsContainer', page).addClass('timelineItemsContainer');
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue