Better solution to avoid flash of unstyled text

Simply hide the iframe while loading
This commit is contained in:
Kovid Goyal 2019-10-15 18:40:11 +05:30
parent d9284fe6ab
commit a1171d71fb
No known key found for this signature in database
GPG Key ID: 06BC317B515ACE7C
3 changed files with 24 additions and 22 deletions

View File

@ -262,15 +262,15 @@ class IframeBoss:
self.do_layout(self.is_titlepage)
if self.mathjax:
return apply_mathjax(self.mathjax, self.book.manifest.link_uid, self.content_loaded_stage2)
# window.setTimeout(self.content_loaded_stage2, 1000)
self.content_loaded_stage2()
def content_loaded_stage2(self):
self.connect_links()
self.content_ready = True
# this is the loading styles used to suppress scrollbars during load
# added in unserialize_html and the overlay to hide flash of unstyled
# text
document.body.removeChild(document.body.firstChild)
# added in unserialize_html
document.head.removeChild(document.head.firstChild)
csi = current_spine_item()
if csi.initial_position:

View File

@ -236,13 +236,11 @@ def unserialize_html(serialized_data, proceed, postprocess_dom):
head, body = tree[1], tree[2] # noqa: unused-local
clear(document.head, document.body)
remove_all_attributes(document.head, document.body)
# prevent flash of unstyled text during loading, showing
# a blank background instead
document.body.appendChild(E.div(
'\xa0',
style=f'position: absolute; z-index: 2147483647; width: 10000vw; height: 10000vh; background-color: {opts.color_scheme.background}',
# hide browser scrollbars while loading since they will anyway be hidden
# after loading and this prevents extra layouts
document.head.appendChild(
E.style(type='text/css', 'html::-webkit-scrollbar, body::-webkit-scrollbar { display: none !important }')
))
)
# Default stylesheet
if not runtime.is_standalone_viewer:
# for the standalone viewer the default font family is set

View File

@ -499,27 +499,28 @@ class View:
s.color = ans.foreground
s.backgroundColor = ans.background
sd = get_session_data()
self.iframe.style.backgroundColor = ans.background or 'white'
iframe = self.iframe
iframe.style.backgroundColor = ans.background or 'white'
bg_image = sd.get('background_image')
if bg_image:
self.iframe.style.backgroundImage = f'url({READER_BACKGROUND_URL}?{Date().getTime()})' if runtime.is_standalone_viewer else f'url({bg_image})'
iframe.style.backgroundImage = f'url({READER_BACKGROUND_URL}?{Date().getTime()})' if runtime.is_standalone_viewer else f'url({bg_image})'
else:
self.iframe.style.backgroundImage = 'none'
iframe.style.backgroundImage = 'none'
if sd.get('background_image_style') is 'scaled':
self.iframe.style.backgroundSize = '100% 100%'
self.iframe.style.backgroundRepeat = 'no-repeat'
self.iframe.style.backgroundAttachment = 'scroll'
self.iframe.style.backgroundPosition = 'center'
iframe.style.backgroundSize = '100% 100%'
iframe.style.backgroundRepeat = 'no-repeat'
iframe.style.backgroundAttachment = 'scroll'
iframe.style.backgroundPosition = 'center'
else:
self.iframe.style.backgroundSize = 'auto'
self.iframe.style.backgroundRepeat = 'repeat'
self.iframe.style.backgroundAttachment = 'scroll'
self.iframe.style.backgroundPosition = '0 0'
iframe.style.backgroundSize = 'auto'
iframe.style.backgroundRepeat = 'repeat'
iframe.style.backgroundAttachment = 'scroll'
iframe.style.backgroundPosition = '0 0'
m.parentNode.style.backgroundColor = ans.background # this is needed on iOS where the bottom margin has its own margin, so we dont want the body background color to bleed through
iframe.parentNode.style.backgroundColor = ans.background # this is needed on iOS where the bottom margin has its own margin, so we dont want the body background color to bleed through
self.content_popup_overlay.apply_color_scheme(ans.background, ans.foreground)
self.book_scrollbar.apply_color_scheme(ans)
self.iframe.parentNode.parentNode.style.backgroundColor = ans.background
iframe.parentNode.parentNode.style.backgroundColor = ans.background
return ans
def on_resize(self):
@ -541,7 +542,9 @@ class View:
if self.show_loading_callback_timer is not None:
clearTimeout(self.show_loading_callback_timer)
self.show_loading_callback_timer = None
self.iframe.style.visibility = 'visible'
self.overlay.hide_loading_message()
self.focus_iframe()
def parse_cfi(self, encoded_cfi, book):
name = cfi = None
@ -881,6 +884,7 @@ class View:
# We cannot encrypt this message because the resource data contains
# Blob objects which do not survive encryption
self.processing_spine_item_display = True
self.iframe.style.visibility = 'hidden'
self.iframe_wrapper.send_unencrypted_message('display',
resource_data=resource_data, book=self.book, name=self.currently_showing.name,
initial_position=self.currently_showing.initial_position,