用于动画的图像预加载

Image Preloading for animation

本文关键字：加载 图像 动画 用于      更新时间：2023-09-26

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

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

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/

相关文章：