kiwix/kiwix-js-pwa
1
0
Fork 0
mirror of https://github.com/kiwix/kiwix-js-pwa.git synced 2025-09-17 08:20:10 -04:00
Code Issues Packages Projects Releases Wiki Activity

Improved code (refactored)

Browse Source 
Delay is now reduced


Former-commit-id: 27f0714ceed9de84b9deb11bb2094d293295c31e [formerly 185b1e19a2a67c4b5d4a1eec8b65b9c304c8fa13]
Former-commit-id: de7926106adbd7f8ca068f45efd9f4e7172472ae
This commit is contained in:
Jaifroid 2017-07-23 18:06:31 +01:00
parent dae524cf16
commit 377cc87c7a
1 changed files with 31 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
www/js/app.js
View File

@ -1005,40 +1005,55 @@ define(['jquery', 'zimArchiveLoader', 'util', 'uiUtil', 'cookies','abstractFiles
console.timeEnd("Time to First Paint");
//var imageURLs = htmlContent.match(/kiwixsrc\s*=\s*["'](?:\.\.\/|\/)+(I\/)/ig);
//var allImagesCount = imageURLs.length; //Do you need this? Just do imageURLs.length
var images = $('#articleContent').contents().find('body').find('img');
var countImages = 0;
//DEV: firstSliceSize determines maximum number of images loaded above the fold (should be <= 10)
var firstSliceSize = 10; //Smaller numbers give faster subjective experience, but too small may delay load of visible images above the fold
//Smaller numbers give faster subjective experience, but too small may delay load of visible images above the fold
var firstSliceSize = 10;
//DEV: sliceSize determines minimum batch size of background image extraction for remaining images
var sliceSize = 200; //Larger numbers marginally increase speed of background extraction (NB 200 will extract up to 399 in one go)
//Larger numbers marginally increase speed of background extraction but take longer for directory lookup and conflict with user scrolling
var sliceSize = 20;
var remainder = (images.length - firstSliceSize) % (sliceSize);
var imageSlice = {};
var slice$x = 0;
var slice$y = 0;
var windowScroll = false;
sliceImages();
if (images) { //If there are images in the article, set up a listener function for onscroll event
if (images.length > firstSliceSize) {
$("#articleContent").contents().on("scroll", function () {
if (windowScroll) { //Ensure event doesn't fire multiple times
windowScroll = false; //Indicate we no longer need to delay execution because user has scrolled
sliceImages();
}
});
}
sliceImages();
}
//Loads images in batches or "slices" according to firstSliceSize and sliceSize parameters set above
//Slices after firstSlice are delayed until the user scrolls the iframe window
function sliceImages() {
if ((countImages >= slice$y) && (countImages < images.length)) { //If starting loop or slice batch is complete AND we still need images for article
//If starting loop or slice batch is complete AND we still need images for article
if ((countImages >= slice$y) && (countImages < images.length)) {
if (!windowScroll) { //If we haven't requested the next loop to be on scroll
slice$x = slice$y;
slice$y = slice$y > 0 ? slice$y + sliceSize : slice$y + firstSliceSize; //Increment by standard or initial sliceSize
slice$y = slice$y > images.length ? images.length : slice$y; //If all images can be obtained in one batch, set slice$y to number of images
if (slice$x > 0 && (slice$y + remainder === images.length)) { slice$y += remainder; } //Last batch should be increased to include any remainder
console.log("** About to request images # " + (slice$x + 1) + " to " + slice$y + "...");
//If all images can be obtained in one batch, set slice$y to number of images
slice$y = slice$y > images.length ? images.length : slice$y;
//Last batch should be increased to include any remainder
if (slice$x > 0 && (slice$y + remainder === images.length)) { slice$y += remainder; }
console.log("Requesting images # " + (slice$x + 1) + " to " + slice$y + "...");
imageSlice = images.slice(slice$x, slice$y);
windowScroll = true; //Ensure next loop gets delayed until a scroll event occurs
serializeImages();
} else {
$("#articleContent").contents().on("scroll", function () {
if (windowScroll) { //Ensure event doesn't fire multiple times
windowScroll = false; //Indicate we no longer need to delay execution because user has scrolled
sliceImages();
}
});
console.log("** Waiting for user to scroll the window...");
}
} else { //All images requested, so Unload the scroll listener
if (countImages == images.length) {
console.log("Unloading scroll listener");
$("#articleContent").contents().off('scroll');
}
if (!windowScroll) { $("#articleContent").contents().off('scroll'); }
}
}