mirror of
https://github.com/jellyfin/jellyfin-web
synced 2025-03-30 19:56:21 +00:00
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.
This commit is contained in:
parent
66f8b0f93d
commit
2365becc14
4 changed files with 88 additions and 3 deletions
62
dashboard-ui/thirdparty/jquery.unveil-custom.js
vendored
Normal file
62
dashboard-ui/thirdparty/jquery.unveil-custom.js
vendored
Normal file
|
@ -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);
|
Loading…
Add table
Add a link
Reference in a new issue