From ac2a51f066c900a7fc16c6eac3c0c8d9698ec680 Mon Sep 17 00:00:00 2001 From: Christian Aribaud Date: Sat, 15 Apr 2023 18:14:57 +0200 Subject: [PATCH] Further image loading smoothing --- comic_reader.css | 2 +- comic_reader.js | 15 +++++++++++++++ comic_reader_test_high_res.html | 24 ++++++++++++------------ 3 files changed, 28 insertions(+), 13 deletions(-) diff --git a/comic_reader.css b/comic_reader.css index 5e3f879..61cea82 100644 --- a/comic_reader.css +++ b/comic_reader.css @@ -13,7 +13,7 @@ #reader-pages > img { display: inline-block; - opacity:0; + opacity: 0; transition: all 1s cubic-bezier(.9,.03,.69,.22); /* ease-in quartic */ flex-shrink: 0; } diff --git a/comic_reader.js b/comic_reader.js index 0c04c13..5d34308 100644 --- a/comic_reader.js +++ b/comic_reader.js @@ -97,12 +97,27 @@ function totalPagesWidth() { function initReader(){ moveReaderDisplayToZoom(0) + // Smoothly show pictures when they intersect with the viewport + let visibilityObserver = new IntersectionObserver((entries, observer) => { + entries.forEach((entry) => { + if (entry.isIntersecting) { + entry.target.style.opacity = 1 + entry.target.style.visibility = "visible" + } else { + entry.target.style.opacity = 0 + entry.target.style.visibility = "hidden" + } + }); + }, { root: READER_FRAME, rootMargin: "-10px" }); + for (var i = 0; i < READER_PAGES.children.length; i++) { let img = READER_PAGES.children[i]; img.style.width = 100 / getPagesCount() + "%" + visibilityObserver.observe(img) } READER_PAGES.style.display = "flex" + setTimeout(() => { READER_PAGES.hidden = false }, "300") diff --git a/comic_reader_test_high_res.html b/comic_reader_test_high_res.html index 8ea8135..3a6b76c 100644 --- a/comic_reader_test_high_res.html +++ b/comic_reader_test_high_res.html @@ -12,18 +12,18 @@