jQuery圖像滑塊一次加載所有圖像

我在我的網站的標題部分有一個jQuery圖像滑塊，它以自動滑動方式定期顯示圖像。現在的問題是當您第一次加載頁面時（沒有任何內容被緩存），它會立即加載滑塊中的所有圖像，並將網頁上的圖像一個在另一個之上對齊（一個div在另一個之上），所以您可以在頁面加載時立即看到所有圖像。它看起來不太專業。是否有可能阻止所有圖像一次顯示或可以在顯示它們之前首先在背景中加載它們的onpageload（）函數？這是一個更低的互聯網速度的問題...我的網站：http://v4m.mobi jQuery圖像滑塊一次加載所有圖像

謝謝！

來源

2012-01-23 DextrousDave

給你的圖像或display:none一個visibility:hidden風格，然後改變自己的風格回display:[block/inline/etc]或visibility:visible上$(window).load()。

$(window).load(function(){ 
    $('#myImage1').css('visibility','visible'); 
    $('#myImage2').css('visibility','visible'); 
    //etc 
});

來源

2012-01-23 15:05:34

嗨DC_。感謝您的回答，但我想知道，具體如何應用可見性：使用document.ready（）函數在圖像上可見？由於html中的圖像在其他回答者建議的javascript – DextrousDave

$（window）.load之前加載可能實際上更好。我用一些示例代碼編輯了我的答案。 –

嘿@DC_你的代碼工作！我想補充一件事。如果我們有很多圖像，那麼我們可以改變圖像本身的父div/ul /容器的可見性，而不是更改每個圖像的可見性。 – Sarvan

預加載圖片或使用jQuery並使用window.load（）加載代碼。

$(window).load(function(){ 
// runs after images are loaded 
});

來源

2012-01-23 16:10:10 j08691

感謝您的回答，我假設您上面的方法使用了Ajax？ – DextrousDave

其實不，不是。 – j08691

我試過$（window）.load（function（）{}）;功能，但它仍然加載圖像第一件事。它首先加載包含圖像的html表格，然後加載jquery和css。我也嘗試了以下（http://perishablepress.com/press/2009/12/28/3-ways-preload-images-css-javascript-ajax/），但沒有真正的幫助，特別是在網速慢的情況下。 – DextrousDave

你能不能簡單地做：

.slideshow img { 
    display: none; 
} 

.slideshow img:first-child { 
    display: block; 
}

他們可能會或可能不會立刻取決於瀏覽器，但至少只有一個是可見的所有負載。另外，您還可以看到第一張圖片的非JavaScript後備廣告。

如果您需要較舊的瀏覽器支持，請創建某種「可見」類並將其添加到第一個圖像元素。

來源

2012-07-04 12:03:03 martinedwards

jQuery圖像滑塊一次加載所有圖像

回答

相關問題