JavaFX – Loading Images

JavaFX provides many features which can be utilized while loading large images. Image has an attribute backgroundLoading which can be set to true, so that image loads in a background thread without freezing the UI. A placeholder image (thumbnail) can be shown using placeholder attribute. The approximate percentage of image’s loading that has been completed can be determined from progress attribute.

Now lets see how to use these attributes. In below code we have set backgroundLoading to true and specified placeholder image.

// Load specified image in background thread
var imageView = ImageView {
    image: Image {
        url: "<image url>"
        backgroundLoading: true
        placeholder: Image {
            url: "<thumbnail url>"

Now we can directly get the progress of image loading using imageView.image.progress or we can bind this value to another attribute as shown below

// Bind to Image.progress and print the progress
var progress = bind imageView.image.progress on replace {
    println("progress {progress}");

The same progress attribute can be bound to actual progress bar. In this sample we are binding this progress to width of a Rectangle. So that the width of rectangle is proportional to the progress of image loading as shown below.

Rectangle {
    x: 11
    y: (sceneHeight - 9)
    // Change width of rectangle proportional to image progress
    width: bind ((sceneWidth - 20* progress)/100.0
    height: 3
    arcWidth: 5
    arcHeight: 5
    fill: Color.RED

Launch Sample –


digg_skin = ‘compact’;
digg_window = ‘new’;

About Rakesh Menon

4 Responses to JavaFX – Loading Images

  1. this is great. But I find image take more time than normal loading. In my case, I feel it is taking more than 30-40 percent of more time.
    What your ideas on this ?

  2. Rakesh Menon says:

    @Vaibhav I tried loading [800X600] image using Browser and JavaFX. It was taking almost same time. Can you compare?

  3. Farrukh obaid says:

    Hi i created flash like demo please check this out

  4. Rakesh Menon says:

    @Farrukh This looks cool! Would you like to add a post to ?

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: