Fullscreen slideshow with vertical carousel.Fading in fullscreen image issue

我做了一個垂直旋轉木馬，它由圖片組成，點擊時應該是全屏可見的。但問題是我無法弄清楚如何確保全屏圖像被預加載或者像縮略圖一樣工作（正在預加載）。Fullscreen slideshow with vertical carousel.Fading in fullscreen image issue

我不確定使用css背景預加載全屏圖像需要遵循什麼樣的方法，以及如何確保圖像淡入或僅僅在點擊旋轉木馬中的縮略圖時進行一些過渡。

請看我的代碼上傳的以下鏈接。 http://www.lluvia.me/slideshow/carousel.html

如果方便，可以通過檢查源代碼來檢查腳本。幫助，將不勝感激。謝謝！

來源

2013-01-01 Prateek

發現這個職位並推斷它可能會幫助你，Preloading images with jQuery

嘗試發佈一些代碼在你的身體以供將來參考。 :)

方便快捷：

function preload(arrayOfImages) { 
    $(arrayOfImages).each(function(){ 
     $('<img/>')[0].src = this; 
     // Alternatively you could use: 
     // (new Image()).src = this; 
    }); 
} 

// Usage: 

preload([ 
    'img/imageName.jpg', 
    'img/anotherOne.jpg', 
    'img/blahblahblah.jpg' 
]);

或者，如果你想有一個jQuery插件：

$.fn.preload = function() { 
this.each(function(){ 
    $('<img/>')[0].src = this; 
}); 
} 

// Usage: 

$(['img1.jpg','img2.jpg','img3.jpg']).preload();

另外，如果你想用CSS純粹堅持看看這個頁面：http://perishablepress.com/3-ways-preload-images-css-javascript-ajax/你只需將背景圖像置於屏幕外，然後在需要時出現在屏幕上即可。

#preload-01 { background: url(http://domain.tld/image-01.png) no-repeat -9999px -9999px; } 
#preload-02 { background: url(http://domain.tld/image-02.png) no-repeat -9999px -9999px; } 
#preload-03 { background: url(http://domain.tld/image-03.png) no-repeat -9999px -9999px; }

來源

2013-01-01 15:27:03

Fullscreen slideshow with vertical carousel.Fading in fullscreen image issue

回答

相關問題