Making scrolling and image loading more tolerant of slow loading.

This commit is contained in:
Adam Miller 2015-01-30 16:55:53 -08:00
parent cdcef934e7
commit ce47461656

View file

@ -4,12 +4,13 @@
// //
var umbraInstagramBehavior = { var umbraInstagramBehavior = {
IDLE_TIMEOUT_SEC: 10, IDLE_TIMEOUT_SEC: 20,
idleSince: null, idleSince: null,
state: "loading-thumbs", state: "loading-thumbs",
imageCount: null, imageCount: null,
bigImagesLoaded: 0, bigImagesLoaded: 0,
latestBigImage: null, currentBigImage: null,
previousBigImage: null,
intervalFunc: function() { intervalFunc: function() {
if (this.state === "loading-thumbs") { if (this.state === "loading-thumbs") {
@ -31,15 +32,18 @@ var umbraInstagramBehavior = {
console.log("nothing to do at the moment, might be waiting for something to load, setting this.idleSince=Date.now()"); console.log("nothing to do at the moment, might be waiting for something to load, setting this.idleSince=Date.now()");
this.idleSince = Date.now(); this.idleSince = Date.now();
return; return;
} else if (Date.now() - this.idleSince > 3000) { } else {
console.log("finished loading-thumbs, it appears we have reached the bottom"); var doneButtons = document.querySelectorAll(".PhotoGridMoreButton.pgmbDisabled");
this.state = "clicking-first-thumb"; if (Date.now() - this.idleSince > 9000 || (doneButtons.length > 0 && doneButtons[0].innerText === "All items loaded") ) {
this.idleSince = null; console.log("finished loading-thumbs, it appears we have reached the bottom");
return; this.state = "clicking-first-thumb";
} else { this.idleSince = null;
// console.log("still might be waiting for something to load..."); return;
return; } else {
} // console.log("still might be waiting for something to load...");
return;
}
}
} }
if (this.state === "clicking-first-thumb") { if (this.state === "clicking-first-thumb") {
@ -61,26 +65,38 @@ var umbraInstagramBehavior = {
} }
if (this.state === "waiting-big-image") { if (this.state === "waiting-big-image") {
var imageFrame = document.querySelectorAll("div.Modal div.Item div.iMedia div.Image"); if(this.currentBigImage == null) {
if (imageFrame.length > 0) { var imageFrame = document.querySelectorAll("div.Modal div.Item div.iMedia div.Image");
var bigImage = new Image(); if (imageFrame.length > 0 && imageFrame[0].getAttribute("src") !== this.previousBigImage ) {
bigImage.src = imageFrame[0].getAttribute("src"); this.currentBigImage = new Image();
// console.log("bigImage.naturalWidth=" + bigImage.naturalWidth + " bigImage.src=" + bigImage.src); this.currentBigImage.src = imageFrame[0].getAttribute("src");
if (bigImage.src !== this.latestBigImage && bigImage.naturalWidth !== 0) { //console.log("this.currentBigImage.naturalWidth=" + this.currentBigImage.naturalWidth + " this.currentBigImage.src=" + this.currentBigImage.src);
console.log("next big image appears loaded, will click right arrow next time");
this.state = "click-next-big-image";
this.latestBigImage = bigImage.src;
this.bigImagesLoaded++;
this.idleSince = null;
return; return;
} } else if(this.idleSince == null ) {
} console.log("waiting for image frame to load");
if (this.bigImagesLoaded >= this.imageCount) { this.idleSince = Date.now();
console.log("looks like we're done, we've loaded all " + this.bigImagesLoaded + " of " + this.imageCount + " big images"); return;
this.state = "finished"; }
} else if (this.currentBigImage.src !== this.previousBigImage && this.currentBigImage.naturalWidth !== 0) {
console.log("next big image appears loaded, will click right arrow next time");
this.state = "click-next-big-image";
this.previousBigImage = this.currentBigImage.src;
this.currentBigImage = null;
this.bigImagesLoaded++;
this.idleSince = null;
if (this.bigImagesLoaded >= this.imageCount) {
console.log("looks like we're done, we've loaded all " + this.bigImagesLoaded + " of " + this.imageCount + " big images");
this.state = "finished";
this.idleSince = Date.now();
}
return;
} else if(this.idleSince == null) {
console.log("Waiting for big image to load");
this.idleSince = Date.now(); this.idleSince = Date.now();
return;
} }
return;
} }
if (this.state === "click-next-big-image") { if (this.state === "click-next-big-image") {