diff --git a/mo/web/templates/org_contest_scans_process.html b/mo/web/templates/org_contest_scans_process.html index 82259ce0c6e636bc88f5f2483aeeb8ce2fd2b651..aa7b92d8e774abb2e2301d79da6437f5f77b7c9b 100644 --- a/mo/web/templates/org_contest_scans_process.html +++ b/mo/web/templates/org_contest_scans_process.html @@ -224,6 +224,7 @@ var pages = [ }, img_full: "{{ png_full(page) }}", img_small: "{{ png_small(page) }}", + img_preloaded: false, }, {% endfor %} ]; @@ -253,6 +254,8 @@ PAGE_PROBABLY_EMPTY = 'probably_empty'; PAGE_UNKNOWN = 'unknown'; PAGE_UFO = 'ufo'; +PRELOAD_COUNT = 3; + function isChanged(p) { for (k of keys) { if (p[k] != p.orig[k]) { return true; } @@ -375,6 +378,16 @@ function refreshCurrentData(page) { } } +function preloadImg(i) { + page = pages[i]; + if (page.img_preloaded) { + return; + } + var preloadImg = new Image(); + preloadImg.src = page.img_full; + page.img_preloaded = true; +} + var activeRow = 0; function selectRow(i) { page = pages[i]; @@ -386,12 +399,23 @@ function selectRow(i) { rows[i].classList.add('active'); activeRow = i; - loader.style.opacity = 0.7; - img.onload = function() { - loader.style.opacity = 0; - refreshCurrentData(page); + // Correct closure to avoid changing page param + onLoadFactory = function(page) { + return function() { + loader.style.opacity = 0; + refreshCurrentData(page); + } } + loader.style.opacity = 0.7; + img.onload = onLoadFactory(page); img.src = page.img_full; + page.img_preloaded = true; + + // Preload previous and next images (if not preloaded yet) + for (let j = 1; j <= PRELOAD_COUNT; j++) { + if (i-j >= 0) { preloadImg(i-j); } + if (i+j < pages.length) { preloadImg(i+j); } + } } function refreshActiveRow() {