1.2.45 really preload next in gallery for url array

Author: tophf

.eslintrc.yml

@@ -32,7 +32,7 @@ rules:
   arrow-parens: [2, as-needed]
   arrow-spacing: [2, {before: true, after: true}]
   block-scoped-var: [2]
-  brace-style: [2]
+  brace-style: [2, 1tbs, {allowSingleLine: true}]
   camelcase: [2, {properties: never, allow: ["^GM_\\w+"]}]
   class-methods-use-this: [2]
   comma-dangle: [2, {arrays: always-multiline, objects: always-multiline, functions: ignore}]

script.user.js

@@ -25,7 +25,7 @@
 // @grant       GM.setValue
 // @grant       GM.xmlHttpRequest
 //
-// @version     1.2.44
+// @version     1.2.45
 // @author      tophf
 //
 // @original-version 2017.9.29
@@ -103,7 +103,7 @@ let trustedHTML, trustedScript;
 //#region GM4 polyfill
 
 if (typeof GM === 'undefined' || !GM.xmlHttpRequest)
-  this.GM = {info: GM_info};
+  this.GM = {__proto__: null, info: GM_info};
 if (!GM.getValue)
   GM.getValue = GM_getValue; // we use it only with `await` so no need to return a Promise
 if (!GM.setValue)
@@ -1163,15 +1163,15 @@ const Gallery = {
 
   next(dir) {
     if (dir) ai.gIndex = Gallery.nextIndex(dir);
-    const item = ai.gItems[ai.gIndex];
+    const item = ai.gItem = ai.gItems[ai.gIndex];
     if (Array.isArray(item.url)) {
       ai.urls = item.url.slice(1);
       ai.url = item.url[0];
     } else {
       ai.urls = null;
       ai.url = item.url;
     }
-    ai.preloadUrl = ensureArray(ai.gItems[Gallery.nextIndex(dir || 1)].url)[0];
+    ai.gItemNext = ai.gItems[Gallery.nextIndex(dir || 1)];
     App.startSingle();
     Bar.updateName();
     if (dir) Bar.show(0);
@@ -1375,16 +1375,36 @@ const Popup = {
       this.setAttribute('loaded', '');
       ai.popupLoaded = true;
       Status.set('-loading');
-      if (ai.preloadUrl) {
-        $new('img', {src: ai.preloadUrl});
-        ai.preloadUrl = null;
-      }
+      let i = ai.gItem;
+      if (i) i.url = this.src;
+      if ((i = ai.gItemNext))
+        Popup.preload(this, i);
     }
   },
 
   onZoom() {
     this.classList.remove(`${PREFIX}zooming`);
   },
+
+  async preload(p, item, u = item.url, el = $new('img')) {
+    ai.gItemNext = null;
+    if (!Array.isArray(u)) {
+      el.src = u;
+      return;
+    }
+    for (const arr = u; p === ai.popup && item.url === arr && (u = arr[0]);) {
+      const {type} = await new Promise(cb => {
+        el.src = u;
+        el.onload = el.onerror = cb;
+      });
+      if (arr[0] === u)
+        arr.shift();
+      if (type === 'load') {
+        item.url = u;
+        break;
+      }
+    }
+  },
 };
 
 const PopupVideo = {

types/types.d.ts

@@ -143,6 +143,8 @@ declare namespace mpiv {
     flipY: boolean
     force: boolean
     gIndex: number
+    gItem: GalleryItem
+    gItemNext: GalleryItem
     gItems: GalleryItemsArray
     gNum: number
     imageUrl: StringOrArrayOfStrings
@@ -158,8 +160,6 @@ declare namespace mpiv {
     popupLoaded: boolean
     /** time, ms */
     preloadStart: number
-    /** used by gallery to preload the next image */
-    preloadUrl: string
     rect: DOMRect
     /** is mouse still over PopupInfo.rect */
     rectHovered: boolean