Preloader

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

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);
    }

Links

• Author Homepage
• Issue Tracker
• Source Code
• Discussion Forum

Compatibility