Directory

← Back

Preloader

Add-on for preloading images and music into the browser.

Author

Rating

Popularity

<100

Client side Add-on for preloading images and music into the browser.

Preloaders for preloading images and music into the browser to improve the user experience.

You only need to add a listener to the preloader and it callback when an image/audio has been loaded.

Both preloaders can be given multiple things to load at one time.

With music the loader tries to figure out the audio formats that the browser can handle (probably/maybe) in order: .ogg, .mp3, .wav (having all 3 formats available is recommeded) If nothing is supported then the preloader will stop and fire a failed event.

Sample code

public class MyComponentWidget extends Label implements MusicLoadHandler {

    MusicPreloader musicPreloader = new MusicPreloader();

    int musicLoaded = 0;
    int musicToLoad = 0;

    public MyComponentWidget() {
        musicPreloader.addMusicLoadHandler(this);
    }

    private void updateText() {
        setText("Music: " + musicLoaded + "/" + musicToLoad);
    }

    public void preloadMusic(String url){
        musicPreloader.preloadAudio(Util.getAbsoluteUrl("./VAADIN/"+url));
        musicToLoad++;
        updateText();
    }

    @Override
    public void musicLoaded(MusicLoadEvent event) {
        if(event.isSuccess()){
            musicLoaded++;
            event.getAudio().play();

            final Audio audio = event.getAudio();
            final double duration = audio.getDuration();

            // update audio current time in a timer function while audio playing.
            Timer t = new Timer(){

                @Override
                public void run() {
                    setText("Music: " + musicLoaded + "/" + musicToLoad + "\n" + audio.getCurrentTime() + "/" + duration);
                    if(audio.hasEnded()){
                        this.cancel();
                    }
                }
            };
            t.scheduleRepeating(100);
        }
        updateText();
    }
}
public class MyComponentWidget extends Label implements ImageLoadHandler {

    ImagePreloader preloader = new ImagePreloader();

    int loaded = 0;
    int toLoad = 0;

    public MyComponentWidget() {

        setStyleName("vne");

        preloader.addImageLoadListener(this);
    }

    private void updateText() {
        setText("Loaded: " + loaded + "/" + toLoad);
    }

    public void preloadImage(String url) {
        preloader.preloadImage(Util.getAbsoluteUrl("./VAADIN/"+url));
        toLoad++;
        updateText();
    }

    @Override
    public void imageLoaded(ImageLoadEvent event) {
        if (event.isSuccess())
            loaded++;
        else
            Window.alert("Failed to load image " + event.getFile());
        updateText();
    }
}
    @Override
    public void imageLoaded(ImageLoadEvent event) {
        if (!event.isSuccess()) {
            Window.alert("Failed to load image: " + event.getFile());
            return;
        }
        imageSize = event.getSize();
        imageLoaded = true;

        if (image != null) {
            panel.remove(image);
        }

        panel.setWidth(event.getSize().getWidth() + "px");
        panel.setHeight(event.getSize().getHeight() + "px");

        image = new Image();
        image.setUrl(event.getFile());
        panel.add(image, 0, 0);
    }

Compatibility

(Loading compatibility data...)

Was this helpful? Need more help?
Leave a comment or a question below. You can also join the chat on Discord or ask questions on StackOverflow.

Version

Browser compatibility only informs of tested browsers. Should work on most modern browsers.

(Android chrome did preload music, but test application didn't start playback)

Released
2015-03-10
Maturity
BETA
License
Apache License 2.0

Compatibility

Framework
Vaadin 7.0+
Browser
Firefox
Opera
Safari
Google Chrome

Preloader - Vaadin Add-on Directory

Add-on for preloading images and music into the browser. Preloader - Vaadin Add-on Directory
Client side Add-on for preloading images and music into the browser. Preloaders for preloading images and music into the browser to improve the user experience. You only need to add a listener to the preloader and it callback when an image/audio has been loaded. Both preloaders can be given multiple things to load at one time. With music the loader tries to figure out the audio formats that the browser can handle (probably/maybe) in order: .ogg, .mp3, .wav (having all 3 formats available is recommeded) If nothing is supported then the preloader will stop and fire a failed event.
Online