Phoxy: substitute best fit image on fly

One of phoxy benefits — it allows represent DOM element as object. Maybe it doesn’t have syntax equal to classes, because DOM are different from common class term. Still it could have methods, change self state on condition, inherit etc.

For example we made object ‘image’. It have behavior ‘show/hide fullscreen’ on click. Which can be easily done with phoxy alternatives too. We creating image with ‘constructor’ taking simple param — url.

But here an problem. While image tiny, we want save bandwidth by fetching low-res. When it zoomed we expect high-res. Its ok — lest add second param to constructor, you may say.

And there point where phoxy offer quite another patch. Instead of decide for DOM object, we allow decide it for itself. Lets imagine for a second, if we had set of different resolution of same resource, and image always rendered with minimum suited resolution, wouldn’t it be cool?

But hey, how image element could recognize itself resolution in phase of templating? When it depends on actual css applied on circumstances? And there phoxy overcome.

Instead of trying finish design as soon as possible (and save your battery), it aiming on reduce lag before first content shown. Template performing on the fly, letting you interact with content even if only part of it ready. (yes, it causing a lot of layout recalculation, but for my experience, you either have poor network, and calculation aligned to bulk of fresh resources; or you have good enough network and all resources ready in time of rendering.)

So when ‘image object’ instances, it already know where exactly on the page it spawns, what his parent dimensions and could decide for itself how big it wanna be. (Or in better way, just read what css-layout suggest).

After that, as you probably can guess, it easy for same resource show in one situation 50x50, and in second 800x800. No extra parameters for full-size image required. It also find best fit for phone, tablet, laptop, extra-big screens etc.

I came up with this idea few month ago. I tried to reduce full page load on 2G networks. There single kbyte matters. In same way i wanted to remain fallback to simple url-string scenario.

It was few month ago, but it still inspiring me. I am just >re-implemented< it for my new project. In short, as soon as <img> attached to DOM, we getting it width/height and substitute url to lowest-fit resolution. (So, when we show full-screen, lowest-fit is high-res)

Disclaimer: i used to say that phoxy ate your battery. This is wrong. From my experience user waiting for x% of content. The faster he can interact — the less he wait for load, sooner he click(making new order), less screen time used on same actions. And by 2016 screens still have more consumption than CPU.

Let me explain. For example, i am loading gmail page, i just want write letter to my friend. I need button “compose”, that’s it. I will read inbox later. Why i should wait for it? Phoxy in that case will show controls immediately — because they are static, and they are in device cache.