Threaded Progress Bar Image Loader For Delphi XE5 Firemonkey On Android And IOS

Delphi XE5 Firemonkey Asynchronous HTTP Image LoaderI put together this Delphi XE5 Firemonkey Frame object called AsyncImageLoader which implements a threaded HTTP image loader with a progress bar. If you want to load up a TListBox with an RSS feed you have to create an TImage and download each image manually which will block the GUI of your app. AsyncImageLoader shows one way to solve this problem. The code should work cross platform on Android, IOS, Windows, and IOS. Once you tell AsyncImageLoader to load an image it will display a progress bar until the image has been downloaded and loaded. Instagram uses a similar progress bar style within their app when they load images into your feed.

Another feature of AsyncImageLoader is that it can either pool the HTTP request components and re-use them the next time you load an image with the Frame or it can create the HTTP request components on each request (by setting Pooled to False). If you are only ever going to load an image once you can probably save memory by turning off pooling. Lastly you can load up the URL property of the Frame with the URL that you want to load and then use your own queuing system to load the images (with the Get procedure) when the images become visible (or one at a time). The threading is based on anonymous threads so there is also a new thread created and terminated for each image request.

There are other solutions out there for asynchronous image loading but I haven’t seen any that implement a progress bar. If you don’t need the progress bar and just want a threaded image loading queue check out TImageLoader.

To use AsyncImageLoader you should include the uAsyncImageLoader into your project, select Frames from the component palette, and choose AsyncImageLoader from the popup box.

Download the source code for the Delphi XE5 Firemonkey frame based AsyncImageLoader.

Have Delphi Firemonkey questions? Ask and get answers on StackOverflow.

19 Responses to Threaded Progress Bar Image Loader For Delphi XE5 Firemonkey On Android And IOS

  1. Pingback: TRectangle Bitmap Instead Of TImage For Delphi XE5 Firemonkey On Android And IOS | Delphi XE5 Firemonkey, Delphi Android, Delphi IOS

  2. Veeresh says:

    I am trying to load the images by using this uAsyncImageLoader with some issues.

    In our app we need to show the images (like facebook wall). We are loading first 5 images then after if user clicks on “Show More” we are loading another 5 images. Process repeats until there is no data found. Problem is after loading the 20 or 25 images app is forcely closing. And another thing is in the given frame i have removed the “ProgressBar” and placed an “AniIndicator”. But it is not showing the “AniIndicator”.

    Can you please help me in regarding this ?

  3. Veeresh says:

    In our app we have an option called wall post. There user will enter some wall status (writes some comments) and selects an image from mobile gallery. How to upload and save that image in our server ?

    Thanks in advance.

    • Admin says:

      Use TRESTClient to submit the data to the server. In the below example I Base64 encode the file first. I use PHP on the server side to get the file with $_REQUEST[‘I’].

      EncStr := EncodeBase64(stream.Memory, stream.Size);

      • Veeresh says:

        I tried this. It is saying the error as “Project Project1.apk raised exception class EIdHTTPProtocolException with message ‘HTTP/1.1 414 Request-URI Too Long’.” What else can do.
        Please suggest.

        • Admin says:

          That is your web server telling you that your URL is too long I believe. Try doing a POST instead of a GET?

          • Veeresh says:

            Actually i forgot to change that property (RestRequest.Method = rmPost). After that it worked like charming.
            Thanks once again.

      • Jose Morango says:

        Please do you have a working example?

        can’t make this work, i really need to make na upload to our server but didn’t yet figure out how to do it

  4. Veeresh says:


    How to make an image auto size ? I mean, without hard coding the TImage height and width how to auto adjust the size of the TImage based on that image dimensions ? In simple words, like facebook wall image. Actually i submitted this query at “Submit Story”. But unfortunately i didn’t receive the response. Please help.

    Thanks in advance.

  5. Pingback: Access The Marvel Developer API With REST And JSON In Delphi XE6 Firemonkey On Android And IOS | Delphi XE5 XE6 Firemonkey, Delphi Android, Delphi IOS

  6. Fábio says:

    How to add AsyncImageLoader to my project on DX Seattle?

Leave a Reply

Show Buttons
Hide Buttons
Read previous post:
Free Triangle Component For Delphi XE5 Firemonkey On Android And IOS

Pawel Glowacki from Embarcadero has a blog post from a couple years ago where he explains how to create a...