Make zoom image code more resilient on slow networks

This commit is contained in:
Maurice Parker 2019-10-19 16:54:55 -05:00
parent 3a314d2db7
commit 575b875afa

View File

@ -4,34 +4,35 @@ var imageIsLoading = false;
async function imageWasClicked(img) { async function imageWasClicked(img) {
img.classList.add("nnwClicked"); img.classList.add("nnwClicked");
const rect = img.getBoundingClientRect(); try {
showNetworkLoading(img);
const response = await fetch(img.src);
if (!response.ok) {
throw new Error('Network response was not ok.');
}
const imgBlob = await response.blob();
hideNetworkLoading(img);
var reader = new FileReader();
reader.readAsDataURL(imgBlob);
reader.onloadend = function() {
const rect = img.getBoundingClientRect();
var message = { var message = {
x: rect.x, x: rect.x,
y: rect.y, y: rect.y,
width: rect.width, width: rect.width,
height: rect.height height: rect.height
}; };
try {
showNetworkLoading(img);
const response = await fetch(img.src);
hideNetworkLoading(img);
if (!response.ok) {
throw new Error('Network response was not ok.');
}
const imgBlob = await response.blob();
var reader = new FileReader();
reader.readAsDataURL(imgBlob);
reader.onloadend = function() {
message.imageURL = reader.result; message.imageURL = reader.result;
var jsonMessage = JSON.stringify(message); var jsonMessage = JSON.stringify(message);
window.webkit.messageHandlers.imageWasClicked.postMessage(jsonMessage); window.webkit.messageHandlers.imageWasClicked.postMessage(jsonMessage);
} }
} catch (error) { } catch (error) {
hideNetworkLoading(img);
console.log('There has been a problem with your fetch operation: ', error.message); console.log('There has been a problem with your fetch operation: ', error.message);
} }
@ -51,11 +52,11 @@ function showNetworkLoading(img) {
activityIndicatorImg.src = activityIndicator; activityIndicatorImg.src = activityIndicator;
wrapper.appendChild(activityIndicatorImg); wrapper.appendChild(activityIndicatorImg);
// Wait a half a second before showing the indicator // Wait a bit before showing the indicator
function showActivityIndicator() { function showActivityIndicator() {
activityIndicatorImg.style.opacity = 1; activityIndicatorImg.style.opacity = 1;
} }
setTimeout(showActivityIndicator, 500); setTimeout(showActivityIndicator, 300);
} }
function hideNetworkLoading(img) { function hideNetworkLoading(img) {