3

I have a single page app built with HTML + JS + CSS.

I'm preloading all the images, they are definitely preloaded properly.

In my app, I need to be able to display an image for as low as 0.1 seconds and then immediately hide it, and the player needs to be able to tell what it was.

An image size can be up to 2MB.

The problem is, it seems it's not enough that the image is preloaded, it takes about 0.3 seconds just to fully render it (on an extremely new and strong computer).

How can I render it immediately? Perhaps by adding it to the DOM with visibility hidden a few seconds before it is displayed to the player or something of the sort?

Also, this article seems to be related to the question:

https://jack.ofspades.com/prefetching-preloading-and-prerendering-content-with-html/

Would that be a solution?

<link rel="prerender" href="/assets/images/big-image.jpg">

Should I just create a link object via JS for each image I'd like to prerender?

Royi Bernthal
  • 882
  • 4
  • 17
  • 45
  • You want to show an image for .1 seconds and then hide it? – Ibu Mar 12 '17 at 20:48
  • yes, but the problem is not the logic it's the render time of the image – Royi Bernthal Mar 12 '17 at 20:49
  • 1
    how are you showing and hiding the image? Show the code. – Ibu Mar 12 '17 at 20:50
  • Connection speeds would definitely be an issue with a display time of only .1 seconds. You may want to consider using smaller images, as most people won't even be able to load a 2 megabyte image in .1 of a second... – Obsidian Age Mar 12 '17 at 20:51
  • lbu - Adding and removing a div with an image tag to/from the DOM, the src in the image tag is dynamic. Obsidian - Like I said, I'm already preloading the images, the player doesn't need to download them during the game so connection speed is not a factor. – Royi Bernthal Mar 12 '17 at 20:53
  • @ObsidianAge all images are preloaded though. – Zze Mar 12 '17 at 20:53
  • Have you tried using the template tag which would invoke the shadow dom? https://www.html5rocks.com/en/tutorials/webcomponents/template/ Also read Gunter's answer here on shadow dom performance: http://stackoverflow.com/questions/36012239/is-shadow-dom-fast-like-virtual-dom-in-react-js – Zze Mar 12 '17 at 20:58
  • 2
    Use display block, then display none. Plus a user will not be able to notice the quality of a 2MB image in .1s . You can drastically diminish the size – Ibu Mar 12 '17 at 21:03
  • Zze - seens irrelevant, correct me if I'm wrong. Read under Gotchas in your first link: 'There's no way to "prerender" a template, meaning you cannot preload assets, process JS, download initial CSS, etc. That goes for both server and client. The only time a template renders is when it goes live.' lbu - Is content with display none rendered? It is not displayed obviously but would it contribute to prerendering images? As for image compression - the same images can also be displayed for much more than 0.1 seconds, 0.1 is an extreme case. – Royi Bernthal Mar 12 '17 at 21:17
  • 1
    @Ibu display none indeed renders the image. Thanks! Feel free to post an official answer and I'll mark it as best answer. – Royi Bernthal Mar 12 '17 at 21:40
  • @RoyiBernthal should work if your're preloading your images into blobs and using the blob url as the img src. How are you currently pre-loading your images? – Zze Mar 12 '17 at 23:52
  • @Zze Do you have an example of how it can be done? What I'm doing is creating new image objects, setting their src and waiting for onload and onerror. – Royi Bernthal Mar 13 '17 at 12:32
  • 1
    I asked this question http://stackoverflow.com/questions/41992027/html5-video-audio-cache-issue a month ago, and it contains a working example with a `XMLHTTP to blob` loader. Kaiido also makes some pretty good points too - I recommend checking it out. p.s. sorry for the late reply - I am Australian.... – Zze Mar 13 '17 at 21:24
  • Doesn't it help preload entirely video files instead making range requests? There's no such issue with image files. Correct me if I'm wrong or if I'm misunderstanding the answer. This solution seems to be about entirely preloading rather than prerendering. – Royi Bernthal Mar 14 '17 at 00:50

0 Answers0