模拟《意尔康》网站加载动画效果

效果（纯css实现）：

根本原理：

css:animation:         loader-fill 1s steps(19) forwards;

 

html：

<script src="http://yearcon-cn-asset-1.oss-cn-shanghai.aliyuncs.com/vendors/jquery/jq-1.11.2.min.js"></script>

  <script src="http://yearcon-cn-asset-1.oss-cn-shanghai.aliyuncs.com/vendors/jquery-cacheimage/jquery.cacheimage.js"></script>

<div class="loader-wrapper fullscreen-extra" style="margin-top:50px; width: 1647px; min-height: 350px; ">
   <div class="abs loader valign-middle-by-top animate" style="background-image: url(&quot;http://yearcon-cn-asset-1.oss-cn-shanghai.aliyuncs.com/images/common/loader-sprite.png&quot;); margin-top: -100px; top: 75px;">
   </div>
</div>

 

css:

.abs {
            position: absolute;
        }
        .loader-wrapper {
            position: fixed;
            background: #ffffff;
            z-index: 20000;
            top: 0;
            left: 0;
        }
        .loader-wrapper .loader {
            width: 200px;
            height: 200px;
            background-size: auto 100%;
            background-position: 0px 0px;
            margin-left: -100px;
            left: 50%;
            
        }
        .loader-wrapper .loader.animate {
            animation:         loader-fill 1s steps(19) forwards;
            -webkit-animation: loader-fill 1s steps(19) forwards;
            -moz-animation:    loader-fill 1s steps(19) forwards;
        }
        .loader-wrapper .loader.animate-fast {
            animation:         loader-fill 0.5s steps(19) forwards;
            -webkit-animation: loader-fill 0.5s steps(19) forwards;
            -moz-animation:    loader-fill 0.5s steps(19) forwards;
        }

        @keyframes loader-fill {
            from { background-position: 0% 0%;  }
            to   { background-position: 100% 0%;  }
        }
        @-webkit-keyframes loader-fill {
            from { background-position: 0% 0%;  }
            to   { background-position: 100% 0%;  }
        }
        @-moz-keyframes loader-fill {
            from { background-position: 0% 0%;  }
            to   { background-position: 100% 0%;  }
        }
        @media (min-width: 1311px){}
        @media (min-width: 1171px){}
        @media (max-width: 1200px){}
        @media (max-width: 1170px){}
        @media (max-width: 990px){}
        @media (max-width: 767px){}
        @media (max-width: 700px){}
        @media (max-width: 600px){}
        @media (max-width: 540px){}
        @media (max-width: 480px){}
        @media (max-width: 375px){}
        @media (max-width: 320px){}

script:

var loaderDelayTime = 5000;
        var fastLoadingMode = (document.location.hash != undefined && document.location.hash.length > 0)? true : false; 
        // Skip some loading animation if a hashtag is provided

        var assetBasePath = "http://yearcon-cn-asset-1.oss-cn-shanghai.aliyuncs.com";

        // Remove delay if loading already take longer than that
        setTimeout(function(){
            loaderDelayTime = 10;    
        }, loaderDelayTime);

        $(document).ready(function(){    
            // Loader appears, track event
            // trackEvent('page', 'pageview', 'loading', '');

            // Delayed loading other assets    
            var loaderAnimationTimout = false;
            setTimeout(function(){
                // Start load images with preloader
                var loadedCount = 0;
                var loadedPercentage = 0;
                
                preloadImages.push([
                    assetBasePath+'/images/common/px.gif'
                ]);

                // Add data-preload-src paths into preload script
                $('[data-preload-src]').each(function(){
                    if ($(this).data('preload-src').length > 0 && $(this).data('preload-src') != assetBasePath && $(this).data('preload-src') != assetBasePath+'/')
                    {
                        preloadImages.push($(this).data('preload-src'));
                    }
                });
                
                // Find all background images
                $('[data-bg-src]').each(function(){
                    if ($(this).data('bg-src').length > 0 && $(this).data('bg-src') != assetBasePath && $(this).data('bg-src') != assetBasePath+'/')
                    {
                        preloadImages.push($(this).data('bg-src'));
                    }
                });

                /*$('[style]').each(function(){
                    var bgImage = $(this).css('background-image');
                    bgImage = /^url\((['"]?)(.*)\1\)$/.exec(bgImage);
                    bgImage = bgImage ? bgImage[2] : ""; // If matched, retrieve url, otherwise ""
                    
                    if (bgImage.length > 0)
                    {
                        //preloadImages.push(bgImage);
                    }
                });*/

                $.cacheImage(preloadImages, {
                    load: function (e) {
                        loadedCount++;
                        loadedProgress   = (loadedCount / preloadImages.length);
                        loadedPercentage = Math.floor(loadedProgress * 100);
                        console.log('caching image: '+e.target.src + ' ('+loadedPercentage+'%)');

                        loaderWidth = $('.loader-wrapper .loader').width();
                        var newBgXPos = (Math.floor(loadedPercentage / 5) - 1) * loaderWidth;
                        newBgXPos = Math.max(newBgXPos, 0);
                        
                        //$('.loader-wrapper .loader').css('background-position-x', -newBgXPos+'px');

                        if (loadedCount == preloadImages.length){
                            //console.log('caching image completed');

                            $('[data-preload-src]').each(function(){
                                $(this).attr('src', $(this).data('preload-src'));
                            });
                            $('[data-bg-src]').each(function(){
                                $(this).css('background-image', 'url('+$(this).data('bg-src')+')');
                            });
                            
                            // re-apply ie8 background size fix
                            if ($('html').hasClass('lt-ie9')){
                                setTimeout(function(){
                                    fixBackgroundSize();
                                }, 900);
                            }
                            
                            if (fastLoadingMode){
                                $('.loader-wrapper .loader').addClass('animate-fast');
                                setTimeout(function()
                                {
                                    //onLoaderDismiss();
                                    $('.loader-wrapper').fadeOut(300);
                                }, 800);
                            }else{
                                $('.loader-wrapper .loader').addClass('animate');
                                setTimeout(function()
                                {
                                    //onLoaderDismiss();
                                    $('.loader-wrapper').fadeOut(800);
                                }, 1300);
                            }

                        }
                    },
                    error   : function (e) {  },
                    abort   : function (e) {  },
                    complete: function (e) {  }
                });
            }, (fastLoadingMode ? 100 : 1000));

        });

        function onLoaderDismiss(){
            initHome();
        }

        function initHome(){
            adjustCarouselWidth();
            adjustCarouselHeight();
            carouselGoToSlide(currentSlideIndex);
            carouselOnRotateHander(currentSlideIndex);
            reInitCarouselInterval(6000);

            // Auto scroll to content
            if (document.location.hash != undefined && document.location.hash.length > 0){
                targetElement = (isPhone() && document.location.hash.indexOf('-mobile') <= -1) ? document.location.hash + '-mobile' : document.location.hash;
                scrollToElement(targetElement);
            }else{
                window.scrollTo(0, 0);
            }
        }

        function loadScript(url, callback){
            // Adding the script tag to the head as suggested before
            var head = document.getElementsByTagName('head')[0];
            var script = document.createElement('script');
            script.type = 'text/javascript';
            script.src = url;

            // Then bind the event to the callback function.
            // There are several events for cross browser compatibility.
            script.onreadystatechange = callback;
            script.onload = callback;

            // Fire the loading
            head.appendChild(script);
        }

jquery.cacheimage.js:

(function ($) {
  $.extend($, {
    cacheImage: function (src, options) {
      if (typeof src === 'object') {
        $.each(src, function () {
          $.cacheImage(String(this), options);
        });

        return;
      }

      var image = new Image();

      options = options || {};

      $.each(['load', 'error', 'abort'], function () { // Callbacks
        var e = String(this);
        if (typeof options[e] === 'function') { $(image).bind(e, options[e]); }

        if (typeof options.complete === 'function') {
          $(image).bind(e, options.complete);
        }
      });

      image.src = src;

      return image;
    }
  });

  $.extend($.fn, {
    cacheImage: function (options) {
      return this.each(function () {
        $.cacheImage(this.src, options);
      });
    }
  });
})(jQuery);

 附件：