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) self.do_layout(self.is_titlepage)
if self.mathjax: if self.mathjax:
return apply_mathjax(self.mathjax, self.book.manifest.link_uid, self.content_loaded_stage2) 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() self.content_loaded_stage2()
def content_loaded_stage2(self): def content_loaded_stage2(self):
self.connect_links() self.connect_links()
self.content_ready = True self.content_ready = True
# this is the loading styles used to suppress scrollbars during load # this is the loading styles used to suppress scrollbars during load
# added in unserialize_html and the overlay to hide flash of unstyled # added in unserialize_html
# text document.head.removeChild(document.head.firstChild)
document.body.removeChild(document.body.firstChild)
csi = current_spine_item() csi = current_spine_item()
if csi.initial_position: 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 head, body = tree[1], tree[2] # noqa: unused-local
clear(document.head, document.body) clear(document.head, document.body)
remove_all_attributes(document.head, document.body) remove_all_attributes(document.head, document.body)
# prevent flash of unstyled text during loading, showing # hide browser scrollbars while loading since they will anyway be hidden
# a blank background instead # after loading and this prevents extra layouts
document.body.appendChild(E.div( document.head.appendChild(
'\xa0',
style=f'position: absolute; z-index: 2147483647; width: 10000vw; height: 10000vh; background-color: {opts.color_scheme.background}',
E.style(type='text/css', 'html::-webkit-scrollbar, body::-webkit-scrollbar { display: none !important }') E.style(type='text/css', 'html::-webkit-scrollbar, body::-webkit-scrollbar { display: none !important }')
)) )
# Default stylesheet # Default stylesheet
if not runtime.is_standalone_viewer: if not runtime.is_standalone_viewer:
# for the standalone viewer the default font family is set # for the standalone viewer the default font family is set

View File

@ -499,27 +499,28 @@ class View:
s.color = ans.foreground s.color = ans.foreground
s.backgroundColor = ans.background s.backgroundColor = ans.background
sd = get_session_data() 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') bg_image = sd.get('background_image')
if bg_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: else:
self.iframe.style.backgroundImage = 'none' iframe.style.backgroundImage = 'none'
if sd.get('background_image_style') is 'scaled': if sd.get('background_image_style') is 'scaled':
self.iframe.style.backgroundSize = '100% 100%' iframe.style.backgroundSize = '100% 100%'
self.iframe.style.backgroundRepeat = 'no-repeat' iframe.style.backgroundRepeat = 'no-repeat'
self.iframe.style.backgroundAttachment = 'scroll' iframe.style.backgroundAttachment = 'scroll'
self.iframe.style.backgroundPosition = 'center' iframe.style.backgroundPosition = 'center'
else: else:
self.iframe.style.backgroundSize = 'auto' iframe.style.backgroundSize = 'auto'
self.iframe.style.backgroundRepeat = 'repeat' iframe.style.backgroundRepeat = 'repeat'
self.iframe.style.backgroundAttachment = 'scroll' iframe.style.backgroundAttachment = 'scroll'
self.iframe.style.backgroundPosition = '0 0' 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.content_popup_overlay.apply_color_scheme(ans.background, ans.foreground)
self.book_scrollbar.apply_color_scheme(ans) self.book_scrollbar.apply_color_scheme(ans)
self.iframe.parentNode.parentNode.style.backgroundColor = ans.background iframe.parentNode.parentNode.style.backgroundColor = ans.background
return ans return ans
def on_resize(self): def on_resize(self):
@ -541,7 +542,9 @@ class View:
if self.show_loading_callback_timer is not None: if self.show_loading_callback_timer is not None:
clearTimeout(self.show_loading_callback_timer) clearTimeout(self.show_loading_callback_timer)
self.show_loading_callback_timer = None self.show_loading_callback_timer = None
self.iframe.style.visibility = 'visible'
self.overlay.hide_loading_message() self.overlay.hide_loading_message()
self.focus_iframe()
def parse_cfi(self, encoded_cfi, book): def parse_cfi(self, encoded_cfi, book):
name = cfi = None name = cfi = None
@ -881,6 +884,7 @@ class View:
# We cannot encrypt this message because the resource data contains # We cannot encrypt this message because the resource data contains
# Blob objects which do not survive encryption # Blob objects which do not survive encryption
self.processing_spine_item_display = True self.processing_spine_item_display = True
self.iframe.style.visibility = 'hidden'
self.iframe_wrapper.send_unencrypted_message('display', self.iframe_wrapper.send_unencrypted_message('display',
resource_data=resource_data, book=self.book, name=self.currently_showing.name, resource_data=resource_data, book=self.book, name=self.currently_showing.name,
initial_position=self.currently_showing.initial_position, initial_position=self.currently_showing.initial_position,