Javascript 动画图像预加载

我在一些网页的顶部有一个横幅。横幅是静态的，直到用户单击播放按钮启动动画

动画是一个很长的水平图像，它只是滚动，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:

---

data-l将存储您的大图像

<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' />

图像将在2秒后开始加载

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

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

}

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