Render only when all CSS is fulfilled #381 (#387)

This commit is contained in:
Jaifroid 2018-06-01 15:03:08 +01:00 committed by GitHub
parent 78ee035714
commit d1d9e49975
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 30 additions and 10 deletions

View File

@ -255,7 +255,10 @@
</div>
</div>
<div id="readingArticle" style="display: none;" class="container">
Reading article <span id="articleName"></span> from archive... Please wait <img src="img/spinner.gif" alt="Please wait..." />
<p>Reading article <span id="articleName"></span> from archive... Please wait <img src="img/spinner.gif" alt="Please wait..." /></p>
</div>
<div id="cachingCSS" style="display: none;" class="container">
<p>Caching styles to speed up future page display...</p>
</div>
<iframe id="articleContent" class="articleIFrame" src="article.html"></iframe>
</article>

View File

@ -870,9 +870,6 @@ define(['jquery', 'zimArchiveLoader', 'util', 'uiUtil', 'cookies','abstractFiles
articleContent.innerHTML = htmlArticle;
// Add any missing classes stripped from the <html> tag
if (htmlCSS) articleContent.getElementsByTagName('body')[0].classList.add(htmlCSS);
// Actually display the iframe content
$("#readingArticle").hide();
$("#articleContent").show();
// Allow back/forward in browser history
pushBrowserHistoryState(dirEntry.namespace + "/" + dirEntry.url);
@ -956,29 +953,49 @@ define(['jquery', 'zimArchiveLoader', 'util', 'uiUtil', 'cookies','abstractFiles
for (var i = collapsedBlocks.length; i--;) {
collapsedBlocks[i].classList.add('open-block');
}
$('#articleContent').contents().find('link[data-kiwixurl]').each(function() {
var cssCount = 0;
var cssFulfilled = 0;
$('#articleContent').contents().find('link[data-kiwixurl]').each(function () {
cssCount++;
var link = $(this);
var linkUrl = link.attr("data-kiwixurl");
var title = uiUtil.removeUrlParameters(decodeURIComponent(linkUrl));
if (cssCache && cssCache.has(title)) {
if (cssCache.has(title)) {
var cssContent = cssCache.get(title);
uiUtil.replaceCSSLinkWithInlineCSS(link, cssContent);
cssFulfilled++;
} else {
$('#cachingCSS').show();
selectedArchive.getDirEntryByTitle(title)
.then(function (dirEntry) {
return selectedArchive.readUtf8File(dirEntry,
function (fileDirEntry, content) {
var fullUrl = fileDirEntry.namespace + "/" + fileDirEntry.url;
if (cssCache) cssCache.set(fullUrl, content);
uiUtil.replaceCSSLinkWithInlineCSS(link, content);
var fullUrl = fileDirEntry.namespace + "/" + fileDirEntry.url;
cssCache.set(fullUrl, content);
uiUtil.replaceCSSLinkWithInlineCSS(link, content);
cssFulfilled++;
renderIfCSSFulfilled();
}
);
}).fail(function (e) {
console.error("could not find DirEntry for CSS : " + title, e);
cssCount--;
renderIfCSSFulfilled();
});
}
});
renderIfCSSFulfilled();
// Some pages are extremely heavy to render, so we prevent rendering by keeping the iframe hidden
// until all CSS content is available [kiwix-js #381]
function renderIfCSSFulfilled() {
if (cssFulfilled >= cssCount) {
$('#cachingCSS').hide();
$('#readingArticle').hide();
$('#articleContent').show();
}
}
}
function loadJavaScriptJQuery() {