图片预加载动画

我在我的一些网页顶部有一个横幅。在用户点击启动动画的播放按钮之前，横幅是静态的。图片预加载动画

该动画是一个长的水平图像，只是滚动，并让它完美重叠。

但我想要发生的是有一个较小的替代形象来加载第一，而大图像加载后，然后加载，以取代原来的小图像，所以在页面上没有延迟...

我该如何解决这个问题？

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

来源

2014-09-03 charlotteg

数据-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/

来源

2014-09-03 02:15:29 Parfait

图片预加载动画

回答

相关问题