preloading all png images on application init

classic Classic list List threaded Threaded
7 messages Options
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

preloading all png images on application init

Dietrich Streifert
Hi all!

I would need to preload all images which are defined by the asset markup
like

/**
  * @asset(myapp/*)
  */

at application startup.

I'm trying to get rid of the background image flicker in chrome when
changing the background image on mouse actions within a label.

Any help would be great.

Regards
Dietrich





------------------------------------------------------------------------------
Go from Idea to Many App Stores Faster with Intel(R) XDK
Give your users amazing mobile app experiences with Intel(R) XDK.
Use one codebase in this all-in-one HTML5 development environment.
Design, debug & build mobile apps & 2D/3D high-impact games for multiple OSs.
http://pubads.g.doubleclick.net/gampad/clk?id=254741911&iu=/4140
_______________________________________________
qooxdoo-devel mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: preloading all png images on application init

John Spackman-3
Hi Dietrich

If you’ve got a list of what those asset uris are, you can use qx.util.ResourceManager.toUri() to convert each one into a full url which you can then pass to qx.io.ImageLoader.load to do the preloading.  

If you don’t have a list of assets uris you can get them through qx.$$resources, which is technically undocumented but unfortunately qx.util.ResourceManager does not expose the list of uris.

Regards
John




On 03/12/2015, 14:29, "Dietrich Streifert" <[hidden email]> wrote:

>Hi all!
>
>I would need to preload all images which are defined by the asset markup
>like
>
>/**
>  * @asset(myapp/*)
>  */
>
>at application startup.
>
>I'm trying to get rid of the background image flicker in chrome when
>changing the background image on mouse actions within a label.
>
>Any help would be great.
>
>Regards
>Dietrich
>
>
>
>
>
>------------------------------------------------------------------------------
>Go from Idea to Many App Stores Faster with Intel(R) XDK
>Give your users amazing mobile app experiences with Intel(R) XDK.
>Use one codebase in this all-in-one HTML5 development environment.
>Design, debug & build mobile apps & 2D/3D high-impact games for multiple OSs.
>http://pubads.g.doubleclick.net/gampad/clk?id=254741911&iu=/4140
>_______________________________________________
>qooxdoo-devel mailing list
>[hidden email]
>https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel



------------------------------------------------------------------------------
Go from Idea to Many App Stores Faster with Intel(R) XDK
Give your users amazing mobile app experiences with Intel(R) XDK.
Use one codebase in this all-in-one HTML5 development environment.
Design, debug & build mobile apps & 2D/3D high-impact games for multiple OSs.
http://pubads.g.doubleclick.net/gampad/clk?id=254741911&iu=/4140
_______________________________________________
qooxdoo-devel mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: preloading all png images on application init

Cajus Pollmeier
In reply to this post by Dietrich Streifert
Hi Dietrich,

is it an option to use the image map feature?

http://manual.qooxdoo.org/4.1/pages/tool/generator/generator_config_ref
.html#combine-images

That only loads one single image in all browsers. Although we've
switched to icon fonts now ;-)

Cheers,
Cajus

Am Donnerstag, den 03.12.2015, 15:29 +0100 schrieb Dietrich Streifert:

> Hi all!
>
> I would need to preload all images which are defined by the asset
> markup
> like
>
> /**
>   * @asset(myapp/*)
>   */
>
> at application startup.
>
> I'm trying to get rid of the background image flicker in chrome when
> changing the background image on mouse actions within a label.
>
> Any help would be great.
>
> Regards
> Dietrich
>
>
>
>
>
> -------------------------------------------------------------------
> -----------
> Go from Idea to Many App Stores Faster with Intel(R) XDK
> Give your users amazing mobile app experiences with Intel(R) XDK.
> Use one codebase in this all-in-one HTML5 development environment.
> Design, debug & build mobile apps & 2D/3D high-impact games for
> multiple OSs.
> http://pubads.g.doubleclick.net/gampad/clk?id=254741911&iu=/4140
> _______________________________________________
> qooxdoo-devel mailing list
> [hidden email]
> https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel
------------------------------------------------------------------------------
Go from Idea to Many App Stores Faster with Intel(R) XDK
Give your users amazing mobile app experiences with Intel(R) XDK.
Use one codebase in this all-in-one HTML5 development environment.
Design, debug & build mobile apps & 2D/3D high-impact games for multiple OSs.
http://pubads.g.doubleclick.net/gampad/clk?id=254741911&iu=/4140
_______________________________________________
qooxdoo-devel mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel

signature.asc (221 bytes) Download Attachment
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: preloading all png images on application init

John Spackman-3
In reply to this post by Dietrich Streifert
Hi Dietrich

If you’ve got a list of what those asset uris are, you can use qx.util.ResourceManager.toUri() to convert each one into a full url which you can then pass to qx.io.ImageLoader.load to do the preloading.  

If you don’t have a list of assets uris you can get them through qx.$$resources, which is technically undocumented but unfortunately qx.util.ResourceManager does not expose the list of uris.

Regards
John




On 03/12/2015, 14:29, "Dietrich Streifert" <[hidden email]> wrote:

>Hi all!
>
>I would need to preload all images which are defined by the asset markup
>like
>
>/**
>  * @asset(myapp/*)
>  */
>
>at application startup.
>
>I'm trying to get rid of the background image flicker in chrome when
>changing the background image on mouse actions within a label.
>
>Any help would be great.
>
>Regards
>Dietrich
>
>
>
>
>
>------------------------------------------------------------------------------
>Go from Idea to Many App Stores Faster with Intel(R) XDK
>Give your users amazing mobile app experiences with Intel(R) XDK.
>Use one codebase in this all-in-one HTML5 development environment.
>Design, debug & build mobile apps & 2D/3D high-impact games for multiple OSs.
>http://pubads.g.doubleclick.net/gampad/clk?id=254741911&iu=/4140
>_______________________________________________
>qooxdoo-devel mailing list
>[hidden email]
>https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel



------------------------------------------------------------------------------
Go from Idea to Many App Stores Faster with Intel(R) XDK
Give your users amazing mobile app experiences with Intel(R) XDK.
Use one codebase in this all-in-one HTML5 development environment.
Design, debug & build mobile apps & 2D/3D high-impact games for multiple OSs.
http://pubads.g.doubleclick.net/gampad/clk?id=254741911&iu=/4140
_______________________________________________
qooxdoo-devel mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: preloading all png images on application init

Dietrich Streifert
In reply to this post by Cajus Pollmeier
Hi Cajus,

I'm currently using a theme based on John Spackmans aristo theme which
uses png images as radio and check box decoration, allowing a large
number of button states. A lot of combinations like focused, read only,
disabled, checked, invalid which tries to exactly show the button state
to the user.

Along with the state changes, the icon is changed by the appearance,
which is in the end a background-image change and leads to a flicker at
least in current chrome. IE, Safari and Firefox do not show this flicker
in the current versions.

Digging more deeper in my current implementation, I've replaced the
radio button and check box implementation with my own version, which is
not based on qx.ui.basic.Atom, but on qx.ui.basic.Label. The goal was to
reduce the number of used DOM elements and qx objects. This way I cut
down the used DOM elements from 3 to 1 and the used qx objects from 6 to
2. This light versions of the buttons are currently limited to a layout
where the button itself is left and the label is right.

So this light radiobuttons/checkboxes are using css background-image in
order to display the button images, changing the url according to button
states.

I have a LARGE form consisting of approx 600 items, which itself having
nearly 500 radio buttons and 200 check boxes. I've created a monster!

This way I was able to cut down the time to first appear of the form to
50% compared when using the original button implementation on IE11. But
this is another story.

Back to my initial question: I wonder if pre loading all the button
images would stop the flicker.

I thought that there may be a generic way to find all image resources
somehow using the resource manager and allowing me to iterate over and
pre load them into img tags.

And yes! It would be desirable to move from the png implementation to an
icon font, but that would be an even harder thing to achieve, retaining
all those button states and fitting well into the aristo theme (yeah
real knobs on the buttons!)

Back to your suggestion to use combined images:

I've already created a combined image of all the readio/checkbutton
states, but I'm not shure how this fits into using this in the standard
qx.ui.form.RadioButton and qx.ui.form.CheckBox implementations. The
theme appearance eg. of the checkbox just assigns a icon path to the
icon property of the button, depending on all those states, build paths
like myapp/decoration/form/checkbox-checked-hovered.png. The combined
image is checkbox-combined.png aside with a checkbox-combined.meta file
which contains a map offering the background offsets for the combined
images.

For my own implementation, which only has one div, I would need to work
with pseudo elements :after and place the background-image there,
because I can not restrict the display of the background-image in the
single div, as it may have additional padding around the image.

So enough for now ;-)

Any ideas welcome.

Regards
Dietrich

Am 03.12.2015 um 15:58 schrieb Cajus Pollmeier:

> Hi Dietrich,
>
> is it an option to use the image map feature?
>
> http://manual.qooxdoo.org/4.1/pages/tool/generator/generator_config_ref
> .html#combine-images
>
> That only loads one single image in all browsers. Although we've
> switched to icon fonts now ;-)
>
> Cheers,
> Cajus
>
>


------------------------------------------------------------------------------
Go from Idea to Many App Stores Faster with Intel(R) XDK
Give your users amazing mobile app experiences with Intel(R) XDK.
Use one codebase in this all-in-one HTML5 development environment.
Design, debug & build mobile apps & 2D/3D high-impact games for multiple OSs.
http://pubads.g.doubleclick.net/gampad/clk?id=254741911&iu=/4140
_______________________________________________
qooxdoo-devel mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: preloading all png images on application init

voger
In reply to this post by Dietrich Streifert
May I suggest a little ugly hack I am using?

main:function(){
//things
this.__preloadImages();
//more things
},

/**
  * ugly hack to preload some images since
  * qooxdoo doesn't do that
  *
  * @asset(qssite/loader/ajax-loader.gif)
  * @asset(qssite/loader/working.gif)
  * @asset(qssite/dock/dock-l.png)
  * @asset(qssite/dock/dock-r.png)
  * @asset(qssite/dock/dock-m.png)
  * @asset(qssite/dock/button-icons/icon-ical.png)
  * @asset(qssite/dock/button-icons/icon-idisk.png)
  * @asset(qssite/dock/button-icons/icon-iphoto.png)
  * @asset(qssite/dock/button-icons/icon-mail.png)
  * @private
  */
__preloadImages: function(){
    var resources = ["qssite/loader/ajax-loader.gif",
                     "qssite/loader/working.gif",
                     "qssite/dock/dock-l.png",
                     "qssite/dock/dock-m.png",
                     "qssite/dock/dock-l.png",
                     "qssite/dock/button-icons/icon-ical.png",
                     "qssite/dock/button-icons/icon-idisk.png",
                     "qssite/dock/button-icons/icon-iphoto.png",
                     "qssite/dock/button-icons/icon-mail.png"];

     var image = new qx.ui.basic.Image();
     var root = this.getRoot();

     // put the image where nobody is watching
     root.add(image, {top: -5000, left: -500});

     image.addListener("loaded", function(){
                        if (resources.length > 0){
                              image.setSource(resources.pop());
                        } else {
                             root.remove(image);
                              image.dispose();
                        }
                });
                        image.setSource(resources.pop());
                }


On 03/12/2015 04:29 μμ, Dietrich Streifert wrote:

> Hi all!
>
> I would need to preload all images which are defined by the asset markup
> like
>
> /**
>    * @asset(myapp/*)
>    */
>
> at application startup.
>
> I'm trying to get rid of the background image flicker in chrome when
> changing the background image on mouse actions within a label.
>
> Any help would be great.
>
> Regards
> Dietrich
>
>
>
>
>
> ------------------------------------------------------------------------------
> Go from Idea to Many App Stores Faster with Intel(R) XDK
> Give your users amazing mobile app experiences with Intel(R) XDK.
> Use one codebase in this all-in-one HTML5 development environment.
> Design, debug & build mobile apps & 2D/3D high-impact games for multiple OSs.
> http://pubads.g.doubleclick.net/gampad/clk?id=254741911&iu=/4140
> _______________________________________________
> qooxdoo-devel mailing list
> [hidden email]
> https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel
>


------------------------------------------------------------------------------
Go from Idea to Many App Stores Faster with Intel(R) XDK
Give your users amazing mobile app experiences with Intel(R) XDK.
Use one codebase in this all-in-one HTML5 development environment.
Design, debug & build mobile apps & 2D/3D high-impact games for multiple OSs.
http://pubads.g.doubleclick.net/gampad/clk?id=254741911&iu=/4140
_______________________________________________
qooxdoo-devel mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: preloading all png images on application init

Dietrich Streifert
In reply to this post by John Spackman-3
Hi all,

I have implemented a solution which is a combination of Johns and Vogers
recommendation. I've implemented a general purpose mixin which I'm
currently using by adding it to qx.application.Standalone and calling
the method preloadImagesResources at the end of
qx.application.Standalone.main:

     // overridden
     main : function()
     {
       this.base(arguments);

       // preload decoration
       this.preloadImageResources("decoration");
     }

This pre loads everything having the string "decoration" in its resource
path and being a png or gif. It takes care of combined resources. Here
is the gist:

     https://gist.github.com/level420/e1d70de25889609c1f56

The method relies on the existence of the qx.$$resources array having
the structure as of today, gracefully stopping if not.

You may use it in every other class as well, as it does not assume to be
mixed in into qx.application.Standalone, but retrieving the root widget
via qx.core.Init.getApplication().getRoot().

And yes! The chrome flicker on check button and radio button state
changes stopped!

Thank for your help!

Regards
Dietrich

Am 03.12.2015 um 15:43 schrieb John Spackman:

> Hi Dietrich
>
> If you’ve got a list of what those asset uris are, you can use qx.util.ResourceManager.toUri() to convert each one into a full url which you can then pass to qx.io.ImageLoader.load to do the preloading.
>
> If you don’t have a list of assets uris you can get them through qx.$$resources, which is technically undocumented but unfortunately qx.util.ResourceManager does not expose the list of uris.
>
> Regards
> John
>
>
>
>


------------------------------------------------------------------------------
Go from Idea to Many App Stores Faster with Intel(R) XDK
Give your users amazing mobile app experiences with Intel(R) XDK.
Use one codebase in this all-in-one HTML5 development environment.
Design, debug & build mobile apps & 2D/3D high-impact games for multiple OSs.
http://pubads.g.doubleclick.net/gampad/clk?id=254741911&iu=/4140
_______________________________________________
qooxdoo-devel mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel
Loading...