圖片預加載動畫

我在我的一些網頁頂部有一個橫幅。在用戶點擊啓動動畫的播放按鈕之前，橫幅是靜態的。圖片預加載動畫

該動畫是一個長的水平圖像，只是滾動，並讓它完美重疊。

但我想要發生的是有一個較小的替代形象來加載第一，而大圖像加載後，然後加載，以取代原來的小圖像，所以在頁面上沒有延遲...

我該如何解決這個問題？

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

圖片預加載動畫

回答

相關問題