Question

我的一些网页顶部有一条横幅。横幅是静态的，直到用户点击踢动开始动画的播放按钮。

动画是一个很长的水平图像，它只是滚动而且完全重叠。

但我想要发生的是先装入一个较小的替代图像，然后加载大图像后加载原来的小图像，这样页面就没有延迟...

我该怎么做？

这是我的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

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

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/

图像预加载动画

1 个答案: