Defer char.ini loading and use direct img src for char icons

Instead of eagerly fetching char_icon (with HEAD requests per extension)
and char.ini for every character on join, set img.src directly to
char_icon.png and defer char.ini loading until actually needed (character
selection via handlePV, or first IC message via handleMS). This
eliminates thousands of HTTP requests on join for large character lists.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

5 files changed, 13 insertions, 9 deletions

diff --git a/webAO/packets/handlers/handleMS.ts b/webAO/packets/handlers/handleMS.ts
index 2622fe67..9b46bc04 100644
--- a/webAO/packets/handlers/handleMS.ts
+++ b/webAO/packets/handlers/handleMS.ts
@@ -1,7 +1,7 @@
 /* eslint indent: ["error", 2, { "SwitchCase": 1 }] */
 
 import { client, extrafeatures, UPDATE_INTERVAL } from "../../client";
-import { handleCharacterInfo } from "../../client/handleCharacterInfo";
+import { handleCharacterInfo, ensureCharIni } from "../../client/handleCharacterInfo";
 import { resetICParams } from "../../client/resetICParams";
 import { prepChat, safeTags } from "../../encoding";
 import { handle_ic_speaking } from "../../viewport/utils/handleICSpeaking";
@@ -27,6 +27,9 @@ export const handleMS = (args: string[]) => {
         );
         const chargs = (`${char_name}&` + "iniediter").split("&");
         handleCharacterInfo(chargs, char_id);
+      } else if (!client.chars[char_id].inifile) {
+        // Lazily load char.ini in background so future messages have proper data
+        ensureCharIni(char_id);
       }
     }
 
diff --git a/webAO/packets/handlers/handlePU.ts b/webAO/packets/handlers/handlePU.ts
index 508bb516..18e508ef 100644
--- a/webAO/packets/handlers/handlePU.ts
+++ b/webAO/packets/handlers/handlePU.ts
@@ -1,6 +1,6 @@
 import { client } from "../../client";
-import { getCharIcon } from "../../client/handleCharacterInfo";
 import { updatePlayerAreas } from "../../dom/updatePlayerAreas";
+import { AO_HOST } from "../../client/aoHost";
 
 /**
  * Handles a playerlist update
@@ -19,7 +19,9 @@ export const handlePU = (args: string[]) => {
       break;
     case 1:
       const playerImg = <HTMLImageElement>playerRow.childNodes[0].firstChild;
-      getCharIcon(playerImg, data);
+      playerImg.alt = data;
+      playerImg.title = data;
+      playerImg.src = `${AO_HOST}characters/${encodeURI(data.toLowerCase())}/char_icon.png`;
       const charName = <HTMLElement>playerRow.childNodes[1];
       charName.innerText = `[${args[1]}] ${data}`;
       break;
diff --git a/webAO/packets/handlers/handlePV.ts b/webAO/packets/handlers/handlePV.ts
index 4ac747f4..149d90e3 100644
--- a/webAO/packets/handlers/handlePV.ts
+++ b/webAO/packets/handlers/handlePV.ts
@@ -3,6 +3,7 @@ import fileExists from "../../utils/fileExists";
 import { updateActionCommands } from "../../dom/updateActionCommands";
 import { pickEmotion } from "../../dom/pickEmotion";
 import { AO_HOST } from "../../client/aoHost";
+import { ensureCharIni } from "../../client/handleCharacterInfo";
 
 function addEmoteButton(i: number, imgurl: string, desc: string) {
   const emotesList = document.getElementById("client_emo");
@@ -34,7 +35,7 @@ export const handlePV = async (args: string[]) => {
   const emotesList = document.getElementById("client_emo");
   emotesList.style.display = "";
   emotesList.innerHTML = ""; // Clear emote box
-  const ini = me.inifile;
+  const ini = await ensureCharIni(client.charID);
   me.side = ini.options.side;
   updateActionCommands(me.side);
   if (ini.emotions.number === 0) {
diff --git a/webAO/packets/handlers/handleSC.ts b/webAO/packets/handlers/handleSC.ts
index 271a1641..f7b789f2 100644
--- a/webAO/packets/handlers/handleSC.ts
+++ b/webAO/packets/handlers/handleSC.ts
@@ -1,7 +1,7 @@
 import queryParser from "../../utils/queryParser";
 
 import { client } from "../../client";
-import { handleCharacterInfo } from "../../client/handleCharacterInfo";
+import { setupCharacterBasic } from "../../client/handleCharacterInfo";
 const { mode } = queryParser();
 
 /**
@@ -17,13 +17,10 @@ export const handleSC = async (args: string[]) => {
     document.getElementById("client_charselect")!.style.display = "block";
   }
 
-  document.getElementById("client_loadingtext")!.innerHTML =
-    "Loading Characters";
   for (let i = 1; i < args.length; i++) {
     const chargs = args[i].split("&");
     const charid = i - 1;
-
-    setTimeout(() => handleCharacterInfo(chargs, charid), charid * 6);
+    setupCharacterBasic(chargs, charid);
   }
   // We're done with the characters, request the music
   client.sender.sendServer("RM#%");
diff --git a/webAO/packets/handlers/handleSI.ts b/webAO/packets/handlers/handleSI.ts
index f20f4b2d..eac84e03 100644
--- a/webAO/packets/handlers/handleSI.ts
+++ b/webAO/packets/handlers/handleSI.ts
@@ -20,6 +20,7 @@ export const handleSI = (args: string[]) => {
     const demothing = document.createElement("img");
 
     demothing.className = "demothing";
+    demothing.loading = "lazy";
     demothing.id = `demo_${i}`;
     const demoonclick = document.createAttribute("onclick");
     demoonclick.value = `pickChar(${i})`;