如何隱藏照片幻燈片直至完全加載？

Question

我使用Wordpress CMS在索引頁上顯示了Nivo Slider照片幻燈片。 我花了一些時間來優化網站（減少代碼，底部使用JS，異步加載等）。 但是，以草率方式加載大照片仍然存在問題。

具體來說，照片的加載順序不正確，您可以看到每張照片。 幻燈片加載照片時，最后一張照片先加載，然后在加載時迅速跳到第一張照片。 我寧願隱藏Nivo幻燈片放映，直到所有照片都加載完畢（最多只有4張）。

我們使用jQuery作為JS庫，並將其加載到wp_head中。 我可以使用什么代碼延遲顯示此幻燈片，還是有更好的方法來處理此幻燈片？

Answer 1

而不是使用$(document).ready( /*...*/ ); 要觸發幻燈片播放，請使用$(window).load( /*...*/) ，在圖像加載完成后啟動幻燈片播放。

我還建議使用CSS隱藏幻燈片圖像，然后僅在$(window).load()事件中取消隱藏它們。