0

Problem:

I have a variable that contains 192 images in the following way:

<script>
  var stimuli = '.json_encode($_SESSION['stimuli'], JSON_UNESCAPED_SLASHES | JSON_PRETTY_PRINT).';
</script>

An example of each item is as follows:

{
    "image": "assets/materials/4233.png",
    "correct_response": "c",
    "evaluationnumber": 3649,
    "type": "f",
    "stimulustype": "F3aC",
    "item": 4233
},

In my JS file I try to preload all images using the following:

stimuli.forEach(({image}) => loadImage(image));

loadImage() is as follows:

const loadImage = (src) => new Promise((resolve, reject) => {
  const img = new Image();
  img.addEventListener("load", () => resolve(img));
  img.addEventListener("error", err => reject(err));
  img.src = src;
});

When I check the network-tab, only 32 images are preloading and not 192.

Questions

  1. What might be the cause that only 32 of 192 images preload?
  2. How can I rewrite the code to ensure that all 192 images preload?
kexxcream
  • 5,873
  • 8
  • 43
  • 62
  • Do all 192 `load` events fire? Or do some not fire? I'd suggest counting how many load events fire. FYI, the way you show using `loadImage()`, there's no use to having it all wrapped in a promise since you aren't using the promise at all. – jfriend00 Dec 17 '19 at 04:08
  • Also, if each item is as you show, don't you need to get the `.image` property out of each object as in `stimuli.forEach(item => loadImage(item.image))`? And, you are 100% sure that the relative path you have in each item will match together properly with the page path to get the right URL to the image? – jfriend00 Dec 17 '19 at 04:10
  • @jfriend00 Suggestions on how to best count the load events? I don't understand what you mean by "item" in the forEach. I'm extracting the `image` from the `var stimuli` and sending it to `loadImage`, or am I missing something here? – kexxcream Dec 17 '19 at 04:20
  • Oh, I missed the deconstruction in the `.forEach()`. OK, that looks OK. Just put `let cntr = 0;` above the `loadImage()` function definition (not in it). And, then add `console.log(++cntr)` inside the `load` event handler where you call `resolve(img)`. Then, look in the console and see what the last number you get is. Likewise, log any error events with `console.log(err)` (don't need a counter there). You need to know whether you're getting events or the browser is delaying the load until it think the images are actually being used. – jfriend00 Dec 17 '19 at 04:26
  • So the console shows me that the counter went from 1 to 192. No error events were logged. Network still shows me 32 requests were made when I click on the option "Images". – kexxcream Dec 17 '19 at 04:46
  • OK, that sounds like they're all loaded and cached then. I'm not sure I see an actual problem here. – jfriend00 Dec 17 '19 at 05:10
  • I’m wondering why the network tab doesn’t say 192 requests, one for each image? Instead it says 32 requests. – kexxcream Dec 17 '19 at 06:07
  • I have no idea. Why don't you run some sort of test to see if the image caching is actually effective or meeting your goals? You can apparently see what's in the cache as described here: https://developers.google.com/web/tools/chrome-devtools/storage/cache#deleteresource – jfriend00 Dec 17 '19 at 06:11

0 Answers0