Bug with loading of <a-assets> #5251
Description
Description:
We found a bug in which the loading of images is not correctly handled. Because of this, the loading screen is always waiting until the timeout is fired. I attached a very simple code below, you just need to add a random image ("image.jpg") to reproduce (not reproducible on glitch, image needs to be local).
The issue seems to be in the following part of the a-assets code:
line 47 and following:
// Wait for <img>s.
imgEls = this.querySelectorAll('img');
for (i = 0; i < imgEls.length; i++) {
imgEl = fixUpMediaElement(imgEls[i]);
loaded.push(new Promise(function (resolve, reject) {
// Set in cache because we won't be needing to call three.js loader if we have.
// a loaded media element.
THREE.Cache.add(imgEls[i].getAttribute('src'), imgEl);
imgEl.onload = resolve;
imgEl.onerror = reject;
}));
}We are not handling the case if the image has already been loaded, in this case promise is never being resolved. We should use something like the following in the promise:
if (imgEl.complete) {
resolve();
} Is this a known issue or are we missing something? I could create a PR for that if you wish.
- A-Frame Version: 1.4.1
- Platform / Device: Chrome, Macbook Pro 2019 (Intel)
- Reproducible Code Snippet or URL:
<html>
<head>
<script src="https://aframe.io/releases/1.4.1/aframe.min.js"></script>
</head>
<body>
<a-scene>
<a-assets timeout="10000">
<!-- You got until the count of 10 to load else the show will go on without you. -->
<img src="image.jpg">
</a-assets>
<a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9"></a-box>
<a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"></a-sphere>
<a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder>
<a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane>
<a-sky color="#ECECEC"></a-sky>
</a-scene>
</body>
</html>