Make zoom image code more resilient on slow networks
This commit is contained in:
parent
3a314d2db7
commit
575b875afa
@ -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) {
|
||||||
|
Loading…
x
Reference in New Issue
Block a user