smarter image preloading
This commit is contained in:
parent
6bc8332f47
commit
89093ac490
|
@ -8,6 +8,8 @@ html, body {
|
||||||
#controls {
|
#controls {
|
||||||
opacity: 0.8;
|
opacity: 0.8;
|
||||||
animation: 2s linear forwards fade;
|
animation: 2s linear forwards fade;
|
||||||
|
position: relative;
|
||||||
|
z-index: 300;
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes fade {
|
@keyframes fade {
|
||||||
|
@ -62,20 +64,28 @@ html, body {
|
||||||
bottom: 0px;
|
bottom: 0px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#viewer-images {
|
.image-container img {
|
||||||
display: none;
|
position: fixed;
|
||||||
}
|
left: 0;
|
||||||
|
top: 0;
|
||||||
#image-container {
|
|
||||||
height: 100vh;
|
height: 100vh;
|
||||||
width: 100vw;
|
width: 100vw;
|
||||||
background-size: contain;
|
object-fit: contain;
|
||||||
background-repeat: no-repeat;
|
object-position: 50% 50%;
|
||||||
background-position: center;
|
background-color: #111;
|
||||||
|
}
|
||||||
|
|
||||||
|
#current-image img {
|
||||||
|
z-index: 100;
|
||||||
|
}
|
||||||
|
|
||||||
|
#preload-images img {
|
||||||
|
z-index: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
#page-num, #duration {
|
#page-num, #duration {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
|
z-index: 200;
|
||||||
font-size: 14pt;
|
font-size: 14pt;
|
||||||
top: 10px;
|
top: 10px;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
|
|
|
@ -1,7 +1,11 @@
|
||||||
const PROGRESS_UPDATE_INTERVAL = 50;
|
const PROGRESS_UPDATE_INTERVAL = 50;
|
||||||
|
const PRELOAD_BACKWARD = 2;
|
||||||
|
const PRELOAD_FORWARD = 8;
|
||||||
|
|
||||||
document.addEventListener('DOMContentLoaded', () => {
|
document.addEventListener('DOMContentLoaded', () => {
|
||||||
const pages = Array.from(document.querySelectorAll('img.viewer-image'));
|
const currentImage = document.getElementById('current-image');
|
||||||
|
const preloadImages = document.getElementById('preload-images');
|
||||||
|
|
||||||
let currentPage = parseInt(localStorage.getItem(`${WORK_ID}-currentPage`)) || 0;
|
let currentPage = parseInt(localStorage.getItem(`${WORK_ID}-currentPage`)) || 0;
|
||||||
let duration = parseInt(localStorage.getItem(`${WORK_ID}-duration`)) || 10;
|
let duration = parseInt(localStorage.getItem(`${WORK_ID}-duration`)) || 10;
|
||||||
let paused = true;
|
let paused = true;
|
||||||
|
@ -42,26 +46,44 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||||
updateBar();
|
updateBar();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function imageSrc(s) {
|
||||||
|
const img = new Image();
|
||||||
|
img.src = s;
|
||||||
|
return img;
|
||||||
|
}
|
||||||
|
|
||||||
|
function preload() {
|
||||||
|
if (!currentImage.getElementsByTagName('img')[0].complete) {
|
||||||
|
setTimeout(preload, 50);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
preloadImages.replaceChildren(...(
|
||||||
|
IMAGES.slice(
|
||||||
|
Math.max(currentPage - PRELOAD_BACKWARD, 0),
|
||||||
|
currentPage + PRELOAD_FORWARD + 1,
|
||||||
|
).map(imageSrc)
|
||||||
|
));
|
||||||
|
}
|
||||||
|
|
||||||
function changePage(pageNum) {
|
function changePage(pageNum) {
|
||||||
elapsed = 0;
|
elapsed = 0;
|
||||||
|
|
||||||
const previous = pages[currentPage];
|
const previous = IMAGES[currentPage];
|
||||||
const current = pages[pageNum];
|
const current = IMAGES[pageNum];
|
||||||
|
|
||||||
if (current == null) {
|
if (current == null) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
previous.classList.remove('current');
|
|
||||||
current.classList.add('current');
|
|
||||||
|
|
||||||
currentPage = pageNum;
|
currentPage = pageNum;
|
||||||
localStorage.setItem(`${WORK_ID}-currentPage`, currentPage);
|
localStorage.setItem(`${WORK_ID}-currentPage`, currentPage);
|
||||||
|
|
||||||
const display = document.getElementById('image-container');
|
currentImage.replaceChildren(imageSrc(current));
|
||||||
display.style.backgroundImage = `url("${current.src}")`;
|
|
||||||
|
|
||||||
document.getElementById('current-page').innerText = (pageNum + 1).toLocaleString();
|
document.getElementById('current-page').innerText = (pageNum + 1).toLocaleString();
|
||||||
|
|
||||||
|
setTimeout(preload, 1);
|
||||||
}
|
}
|
||||||
|
|
||||||
const durationDisplay = document.getElementById('duration');
|
const durationDisplay = document.getElementById('duration');
|
||||||
|
@ -102,7 +124,7 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||||
|
|
||||||
function exitToWork() {
|
function exitToWork() {
|
||||||
changeDuration(duration, true);
|
changeDuration(duration, true);
|
||||||
if (currentPage === pages.length - 1) {
|
if (currentPage === IMAGES.length - 1) {
|
||||||
localStorage.removeItem(`${WORK_ID}-currentPage`);
|
localStorage.removeItem(`${WORK_ID}-currentPage`);
|
||||||
}
|
}
|
||||||
window.location.href = `../${INDEX}`;
|
window.location.href = `../${INDEX}`;
|
||||||
|
|
|
@ -5,15 +5,15 @@
|
||||||
<script>
|
<script>
|
||||||
const WORK_ID = "{{ work['id'] }}";
|
const WORK_ID = "{{ work['id'] }}";
|
||||||
const INDEX = "{{ index() }}";
|
const INDEX = "{{ index() }}";
|
||||||
|
const IMAGES = [
|
||||||
|
{% for filename in images %}
|
||||||
|
"{{ root() }}/images/{{ work['id'] }}/{{ filename }}",
|
||||||
|
{% endfor %}
|
||||||
|
];
|
||||||
</script>
|
</script>
|
||||||
<script src="{{ root() }}/static/viewer.js"></script>
|
<script src="{{ root() }}/static/viewer.js"></script>
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
{% block body %}
|
{% block body %}
|
||||||
<div id="viewer-images">
|
|
||||||
{% for filename in images %}
|
|
||||||
<img src="{{ root() }}/images/{{ work['id'] }}/{{ filename }}" class="viewer-image">
|
|
||||||
{% endfor %}
|
|
||||||
</div>
|
|
||||||
<div id="progress"></div>
|
<div id="progress"></div>
|
||||||
<div id="page-num">
|
<div id="page-num">
|
||||||
<table>
|
<table>
|
||||||
|
@ -46,5 +46,6 @@
|
||||||
</svg>
|
</svg>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div id="image-container"></div>
|
<div class="image-container" id="current-image"></div>
|
||||||
|
<div class="image-container" id="preload-images"></div>
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|
Loading…
Reference in a new issue