Transparent caching of images in Flash / Flex
In short - this technique speeds up the display of many identical images (with the same url), eliminates repeated downloads and saves memory. Solutions from google-search are not impressed, because It offers only the most basic options without taking into account the particulars, moreover, their introduction into the project is not trivial.
In this solution, replacing Image with ImageCached is sufficient to achieve the effect. At the end of the post is a link to a test application, clearly showing the advantage of caching.
How it all began:
In the current project, there is a lot of work with graphics, and I encountered the following problem - each copy of the Image class with the same URL creates a loader for itself and loads itself (even if from a cache). This is especially noticeable when organizing drag'n'drop'a pictures, when proxy pictures are created while dragging, the picture does not load immediately, and as a result blink is noticeable.
This post was born from this half-second blink.
The image cache, described in most examples, is based on the fact that the source property of the Image class can be assigned both a URL address and a Bitmap class object (in general, an IDisplayObject interface implementer ).
The idea is simple - if an image from such a source has already been downloaded, substitute the bitmap of the loaded image instead of the URL.
option 1:
- if there is no image with such url in the cache, then start downloading it
- otherwise take the downloaded Bitmap from the cache and set it as source
when the download is complete:
- install downloaded bitmap as source
- put downloaded bitmap into cache
This option was generally sufficient for the project, but it has a particular , which at current capacities is questionable, but “not beautiful.”
The fact is that with asynchronous loading, 20 simultaneously output images with the same (and uncached) URL will result in version 1 of the 20 bootloader creations. Therefore was created
')
option 2:
- if there is no entry in the cache with such a URL, then create it, put the object in the waiting queue and start downloading
- if there is an entry with such a URL in the cache and there is data, then set it as source
- if there is an entry in the cache with this URL and there is no data, put the object in the waiting queue
option loader 2:
- put downloaded bitmap into cache
- go through the waiting objects, set the downloaded bitmap as source and remove from the waiting list
This option correctly handles the simultaneous loading of a single URL by several objects, but it also has a particular .
An example is a form with a list of items and a window in which a picture of the current item is shown. With a quick pass through the list, the source of the image may change faster than the previous image can load, which leads to cache synchronization.
The decision own in one line
option3:
- if the object is in the waiting queue, then remove it from the queue (the loader will still put the previous image in the cache, but the source will not be updated with obsolete data)
... further as in option2 ...
As a result, all images will be cached, but as the source, only the last will be installed.
Implementation:
The ImageCached class extends the Image class, overriding the setter for the source property (code below)
Total:
In the project, the Image find-and-replace class has been replaced by ImageCached and forgotten about it.
By the code I will say right away - this is my first project on flash / as3 / flex, I did not find an analogue of std: map for the cache, I will be glad of criticism.
Test application - click
It creates two images, immediately after that it exchanges source with each other, while moving the mouse it creates under the cursor Image / ImageCached with a lifetime of 2 seconds.
Switching between Image and ImageCached - on click (garbage collector is also called)
Displays a graph of memory consumption (component nugglen)
Your own but clearly shows how memory jumps and overall speed when using Image and the positive effect of ImageCached.
Sources - click , well, or you can in the application, right click -> View Source
In this solution, replacing Image with ImageCached is sufficient to achieve the effect. At the end of the post is a link to a test application, clearly showing the advantage of caching.
How it all began:
In the current project, there is a lot of work with graphics, and I encountered the following problem - each copy of the Image class with the same URL creates a loader for itself and loads itself (even if from a cache). This is especially noticeable when organizing drag'n'drop'a pictures, when proxy pictures are created while dragging, the picture does not load immediately, and as a result blink is noticeable.
This post was born from this half-second blink.
The image cache, described in most examples, is based on the fact that the source property of the Image class can be assigned both a URL address and a Bitmap class object (in general, an IDisplayObject interface implementer ).
The idea is simple - if an image from such a source has already been downloaded, substitute the bitmap of the loaded image instead of the URL.
option 1:
- if there is no image with such url in the cache, then start downloading it
- otherwise take the downloaded Bitmap from the cache and set it as source
when the download is complete:
- install downloaded bitmap as source
- put downloaded bitmap into cache
This option was generally sufficient for the project, but it has a particular , which at current capacities is questionable, but “not beautiful.”
The fact is that with asynchronous loading, 20 simultaneously output images with the same (and uncached) URL will result in version 1 of the 20 bootloader creations. Therefore was created
')
option 2:
- if there is no entry in the cache with such a URL, then create it, put the object in the waiting queue and start downloading
- if there is an entry with such a URL in the cache and there is data, then set it as source
- if there is an entry in the cache with this URL and there is no data, put the object in the waiting queue
option loader 2:
- put downloaded bitmap into cache
- go through the waiting objects, set the downloaded bitmap as source and remove from the waiting list
This option correctly handles the simultaneous loading of a single URL by several objects, but it also has a particular .
An example is a form with a list of items and a window in which a picture of the current item is shown. With a quick pass through the list, the source of the image may change faster than the previous image can load, which leads to cache synchronization.
The decision own in one line
option3:
- if the object is in the waiting queue, then remove it from the queue (the loader will still put the previous image in the cache, but the source will not be updated with obsolete data)
... further as in option2 ...
As a result, all images will be cached, but as the source, only the last will be installed.
Implementation:
The ImageCached class extends the Image class, overriding the setter for the source property (code below)
Total:
In the project, the Image find-and-replace class has been replaced by ImageCached and forgotten about it.
By the code I will say right away - this is my first project on flash / as3 / flex, I did not find an analogue of std: map for the cache, I will be glad of criticism.
Test application - click
It creates two images, immediately after that it exchanges source with each other, while moving the mouse it creates under the cursor Image / ImageCached with a lifetime of 2 seconds.
Switching between Image and ImageCached - on click (garbage collector is also called)
Displays a graph of memory consumption (component nugglen)
Your own but clearly shows how memory jumps and overall speed when using Image and the positive effect of ImageCached.
Sources - click , well, or you can in the application, right click -> View Source
Source: https://habr.com/ru/post/67670/
All Articles