Изображение Предварительная загрузка для анимации

Question

У меня есть баннер в верхней части некоторых моих веб-страниц. Баннер статический, пока пользователь не нажмет на кнопку воспроизведения, которая запускает анимацию.

Анимация - это одно длинное горизонтальное изображение, которое просто катится вокруг, и iv полностью перекрывает его.

Но я хочу, чтобы сначала было загружено меньшее альтернативное изображение, а большое изображение загрузилось за ним после его загрузки, чтобы заменить оригинальное маленькое изображение, чтобы на странице не было задержки ...

Как это сделать?

Это мой js, чтобы заставить баннер играть по клику.

$(document).ready(function() 
{ 
    var mwbannerfull = $('#mwbannerfull'); 
    var playing = false; 
    var playarrow = $('.playarrow'); 
    var speed = 0.145; 
    var totalDistance = 4350; 
    playarrow.click(function() 
    { 
     if (playing) 
      pause(); 
     else 
      play(); 

     playing = !playing 
     playarrow.toggleClass('playing'); 
    }); 

    function play() 
    { 
     var distance = parseInt(mwbannerfull.css('left'), 10) * -1; 
     if (isNaN(distance)) distance = 0; 
     distance = totalDistance - distance; 
     var time = distance/speed; 
     mwbannerfull.animate({left: '-' + totalDistance + 'px'}, time, 'linear', function() 
     { 
      $(this).css(
      { 
       left: 0 
      }); 
      play(); 
     }); 
    } 
    function pause() 
    { 
     mwbannerfull.stop(); 
    } 
}); 

HTML:

<div id="mwprobanner"> 
    <a href="#!" class="playarrow"> 
     <i class="icon-play"></i> 
     <i class="icon-pause"></i> 
    </a> 
    <div id="mwbannerfull"></div> 
</div> 

Answer 1

данных л будет хранить ваше большое изображение

<img data-l='https://www.google.com.hk/images/srpr/logo11w.png' src='http://www.microsoft.com/global/learning/en-us/PublishingImages/ms-logo-site-share.png' /> 

function startLoading() { 

    $("img").each(function() { 
     var _this = $(this); 
     var src = $(this).attr('data-l'); 
     if (src != "") { 
      var tmp = $(new Image()); 
      //When loaded 
      tmp.one('load', function() { 
       _this.replaceWith(tmp); 
      }); 
      tmp.attr('src', src); 
     } 
    }); 

} 

изображение начнет загружаться через 2 секунды.

setTimeout(function(){ 
    startLoading(); 
},2000); 

http://jsfiddle.net/netorz04/