Improvement Request: Hiding images until layout has rendered

[JohannRosenberg]

When I use the plugin, the images need to be in the DOM and visible before the xGllerify plugin can render the layout. Before the plugin has gotten around to completing the rendering, the images will be shown in their full sizes although only briefly.

Is there a way to prevent the images from showing until the rendering has completed? I tried setting the outer container to display:none and only showed it after the plugin completed. But that didn't help. I also tried setting the opacity on the container to 0 and then to 1 after the rendering completed, but that didn't help either.

It does appear that the plugin needs the images loaded and fully displayed in order to calculate their heights and widths.

I also needed to run the plugin after about a 200 ms timeout once the images have loaded. Of course, a better way is to use the onload method on all images but in the end, the images will flash on the screen at their full size.

[xremix]

@JohannBlake I really like that idea and will definitely implement something like this. I guess I'll implement an option that allows to display only rows that finished loading, that way every image will be hidden at beginning and as soon as one row is finished with rendering I'll show it up.

I might also implement some better event listeners that fire on specific events (row loaded, gallery loaded, etc.) so behaviors like this could be extended from developers.

Btw. have you took a look at the Render and Render Async Images section in the README file? This might also solve your issue. The gallery should be able to handle images that are displayed on default as well as images that get added later.

Also if you could send me a code sample I'd appreciate it and could reproduce this issue better.