Hi SQ, (Chris?), very interesting approach to use css for creating the icon images. I think this is meant to be used for icons in standard buttons e.g. radio button and check box?
I have some qooxdoo apps which have forms with really (I mean really!) a lot of radio buttons and check boxes which also "suffer" from the "bold" implementation of the standard buttons in the current version. What I tried to do is to pre load all images / accompanied with cache settings for the corresponding http request answers from the web server (apache), so that on button creation or state change images are loaded from browser cache. This reduced tremendous the server requests related to images. Just want to mention another potential possibility which I implemented for radio buttons and check boxes: In the current implementation buttons derive from atom, which uses three div elements to render the button. I've did an alternative implementation which only uses one div, using css background image, margin and padding manipulations to render the button icon. The implementation is currently incomplete, as it only supports the icon being placed on the left side of the button. I would name it "a hack". This helped a lot reducing the time for the first rendering of the complex form, especially because of the reduced div elements needed, the biggest gain on internet explorer. It would be very interesting to see if the "reduced number of div" implementation is somehow combinable with your idea, What would mean that we must be able to restrict the CSS rendering to the appropriate button side. Another idea I had is to use pseudo elements :after and :before and to use herein (though I don't know currently if this is possible) web icon fonts where the icon font character is determined by the content css attribute, which also would reduce the number of requests as the font is loaded only once, containing all needed button state icons. Regards Dietrich Am 26.02.2016 um 20:07 schrieb SQville: > Community, > > Want to get your general thoughts on something. I have a love-hate > relationship with images. I don't like the fact that image loading is not in > my total control. I have an approach that changes this. I will keep this > short and provide code examples for you to reference and/or step through at > your convenience. > > *Goal:* Embed the small decorator images found in resource folders (such as > triangles, checks, dots, lines and boxes) into qx code using qx decoration > entries and/or CSS/CSS3 code. > > *Purposes:* 1) reduce number of http calls 2) enhance UX of apps - CSS is > fast and native > > *Code:* > See the comments to image references lines - I noted which images i replaced > with code > https://github.com/sqville/sqv/blob/master/source/class/sqv/theme/clean/Image.js > > Mixin to enable before and after psudo elements and CSS3 functionality > https://github.com/sqville/sqv/blob/master/source/class/sqv/ui/decoration/MCssIcon.js > > Appearance entry changes: around lines 1264 and 1308 > https://github.com/sqville/sqv/blob/master/source/class/sqv/theme/clean/Appearance.js > > Decorator entry changes: see line 1901 > https://github.com/sqville/sqv/blob/master/source/class/sqv/theme/clean/Decoration.js > > *In Summary:* > Question: Why? Answer: Why not? :-) > > SQ > > > > > > > > -- > View this message in context: > http://qooxdoo.678.n2.nabble.com/Embed-design-elements-rather-than-use-images-tp7588132.html > Sent from the qooxdoo mailing list archive at Nabble.com. > > ------------------------------------------------------------------------------ > Site24x7 APM Insight: Get Deep Visibility into Application Performance > APM + Mobile APM + RUM: Monitor 3 App instances at just $35/Month > Monitor end-to-end web transactions and take corrective actions now > Troubleshoot faster and improve end-user experience. Signup Now! > http://pubads.g.doubleclick.net/gampad/clk?id=272487151&iu=/4140 > _______________________________________________ > qooxdoo-devel mailing list > qooxdoo-devel@lists.sourceforge.net > https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel ------------------------------------------------------------------------------ Site24x7 APM Insight: Get Deep Visibility into Application Performance APM + Mobile APM + RUM: Monitor 3 App instances at just $35/Month Monitor end-to-end web transactions and take corrective actions now Troubleshoot faster and improve end-user experience. Signup Now! http://pubads.g.doubleclick.net/gampad/clk?id=272487151&iu=/4140 _______________________________________________ qooxdoo-devel mailing list qooxdoo-devel@lists.sourceforge.net https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel
