apvarun / poppyjs Goto Github PK

Continuing discussion from #2

Currently, the image will load only after the the Poppy element is inserted into the DOM (to show the users), leaving the image blank while loading. Possible solutions for preloading include:

1. Inserting the Poppy element into the DOM upon each new Poppy() call, but hidden from view via CSS. The browser would then load the image requested in the background-image: url(...)
2. Use an AJAX request to fetch the image upon creating the Poppy element in memory (while still outside of the DOM), so the browser can cache the image, ready to show the user when visible.

I've implemented a version of Option (1) in this branch: saltymouse/poppyjs/tree/init-dom-insert
Possible downsides include having unused Poppy elements bloating the DOM.

Option (2), could potentially cause a delay from when the Poppy is requested (e.g. pop.show()) and when it's shown on screen (waiting for the AJAX to load the image resource).

Looking forward to hear more options and opinions!