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
Compatibility
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