splash-screen.js 1.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869
  1. ( function( $, undefined ) {
  2. 'use strict';
  3. $(function() {
  4. var body = $( document.body );
  5. var wrapper = $('.vamtam-splash-screen');
  6. var progress = wrapper.find( '.vamtam-splash-screen-progress' );
  7. var removeSplashScreen = function() {
  8. body.trigger('vamtam-hide-splash-screen');
  9. };
  10. // allow the first image at most 1000ms to load
  11. var timeout = setTimeout( removeSplashScreen, 1000 );
  12. var images = -1;
  13. var loaded = 0;
  14. try {
  15. imagesLoaded( window, removeSplashScreen ).on( 'progress', function( instance ) {
  16. if ( images < 0 ) {
  17. images = instance.images.length;
  18. }
  19. requestAnimationFrame( function() {
  20. progress.css( 'width', ( ++loaded / images ) * 100 + '%' );
  21. } );
  22. // allow any consecutive image at most 500ms to load
  23. clearTimeout( timeout );
  24. timeout = setTimeout( removeSplashScreen, 500 );
  25. } );
  26. } catch( e ) {
  27. removeSplashScreen();
  28. }
  29. body.one('vamtam-hide-splash-screen', function() {
  30. requestAnimationFrame( function() {
  31. progress.css( 'width', '100%' );
  32. setTimeout( function() {
  33. wrapper.fadeOut( 500 );
  34. }, 250 );
  35. } );
  36. }).bind('vamtam-preview-splash-screen', function() {
  37. progress.css( {
  38. 'transition-duration': 0,
  39. width: '0%'
  40. } );
  41. progress.css( {
  42. 'transition-duration': '1s'
  43. } );
  44. wrapper.css( 'display', '' );
  45. setTimeout( function() {
  46. requestAnimationFrame( function() {
  47. progress.css( 'width', '100%' );
  48. setTimeout( function() {
  49. wrapper.fadeOut( 500 );
  50. }, 1000 );
  51. } );
  52. }, 100 );
  53. } );
  54. });
  55. } )( jQuery );