[FREE] Async Image Loader Extension - Simple asynchronous image loader with circular image

Extensions
1

photo
photo512×512 8.95 KB

AsyncImage

An extension for MIT App Inventor 2.

Simple asynchronous image loader extension to load image asynchronously in an image or arrangement component with circular image. This is a simple, light weight and fast async image loader since it does not uses any external library to load images.

:memo: Specifications

:floppy_disk: Size: 9.36 KB
:gear: Version: 5.0
:iphone: Minimum API Level: 7
:date: Updated On: 2025-02-17T18:30:00Z
:computer: Built & documented using: FAST-CLI

Event:

AsyncImage has total 1 event.

:yellow_heart: OnError

OnErrorBlock

Event raised when an error occurs while loading an image.

Parameter Type
errorMessage text

Methods:

AsyncImage has total 2 methods.

:purple_heart: LoadImageAsync

LoadImageAsyncBlock

Load image asynchronously from the given path in the specified component.

Parameter Type
imagePath text
component component

:purple_heart: ClearCache

ClearCacheBlock

Clears the image cache memory.

Designer:

AsyncImage has total 5 designer properties.

:green_apple: PlaceholderImage

  • Input type: asset

:green_apple: ErrorImage

  • Input type: asset

:green_apple: CircularImage

  • Input type: boolean
  • Default value: false

:green_apple: BorderWidth

  • Input type: integer
  • Default value: 0

:green_apple: BorderColor

  • Input type: color
  • Default value: &HFF000000

Setters:

AsyncImage has total 5 setter properties.

:green_heart: PlaceholderImage

PlaceholderImageBlock

Sets the placeholder image to be shown while the image is loading.

  • Input type: text

:green_heart: ErrorImage

ErrorImageBlock

Sets the error image to be shown if loading the image fails.

  • Input type: text

:green_heart: CircularImage

CircularImageBlock

Set to true to make the loaded image circular.

  • Input type: boolean

:green_heart: BorderWidth

BorderWidthBlock

Specifies the width of the border around the loaded image.

  • Input type: number

:green_heart: BorderColor

BorderColorBlock

Specifies the color of the border around the loaded image.

  • Input type: number

Sample Blocks:

image
image1816×1000 103 KB

image
image1988×1016 196 KB

image
image1108×320 33 KB

IMG_20240505_161351
IMG_20240505_161351760×760 90.2 KB

IMG_20240505_161331
IMG_20240505_161331679×679 103 KB

Download:

v5.0 com.thekstudio.asyncimage.aix (9.4 KB)

5 Likes
2

Spelling in aix filename (Aync)

Also, for others may help to indicate the benefits of using this extension, over just loading an image...

3

Oops typo...corrected. Thanks!

4

Updated

You can load image from various sources like assets, local file from ASD or online.
Now you can load image in an arrangement like vertical, horizontal or scroll arrangement.
Added event onError in case failed to load image.

5

Is there some information on this ?

6

Yes, I created this extension for Kodular, as the Kodular inbuilt async image loader block from image utilities component doesn't work due to permission error in higher Android versions.

This extension overcomes that problem as this does not uses any permission.

Specially using with Dynamic component extension when loading large list data that includes images, the app lags until all the images getting loaded synchronously, by using async image loader this problem can be fixed.

7

From that I read that the benefit comes when loading (large) lists of images in one go, or a single large image?

8

As I said, large list data that includes images either small size or large size images, it takes time for loading as it loads synchronously until all images getting loaded, and sometimes the app crashes due to this.

9

Updated:

1 Like
10

I'm having a hard time understanding the difference between a 'for component' and 'component'. Thank you in advance.

2025-01-15_185454
2025-01-15_1854541307×477 52.1 KB

11

You're using the "Any Component" version of this block (notice how it says AsyncImage instead of AsyncImage1 or similar). The "for component" parameter here accepts a component and changes a property for that component. If you look at the component-specific blocks, they do not have the "for component" socket:

image

12

I see what you mean. Odd that when I click on the AsyncImage1 component, no objects display. I tried reloading it but still the same long vertical gray area.

2025-01-15_192931
2025-01-15_192931647×1157 98.2 KB

13

You can set the for component and component to same component in which you want to load the image.

14

I did that but am getting an error: The operation LoadImageAsync cannot accept the arguments: , ["com.google.appinventor.components.runtime.Image@541de13"]

2025-01-15_204650
2025-01-15_2046501400×901 104 KB

15

Do not use load async image block from any component.

Use normal load async image block from the extension like below.

IMG_3463
IMG_3463825×175 35.1 KB

If extension is not showing the blocks then there might be issue with your project, onxe delete the extension and import again. Or try in a new project.

16

I re-installed it twice. Same results. That large vertical gray strip is all I see. I tried Firefox, MS Edge and Chrome browsers. All the same ressults. Maybe the component I downloaded is corrupted inside. I did download the V4 version.

17

Delete the old file and re download the extension again from main post.

May be try in a new project.

1 Like
18

That finally did it -- it worked! Thank you very much.

1 Like
19

v5.0 Updated:

  1. Added image cache feature
  2. Clear cache function to clear the cache memory
  3. Added placeholder image (showed until image loads) and error image (showed in case image load fails) (can be set from assets and local image)
  4. Extension re-built with FAST
1 Like
20

What a great and wonderful extension,, you always do excellent work dude

1 Like