如何強制下載未使用的CSS圖像？

Question

這是我昨天提出的問題的延續，也是本問題的補充 。

基本上，我使用jquery在頁面滾動時更改css背景圖像，但是在第一次訪問時，當滾動時背景更改時，它才開始加載，這會帶來糟糕的用戶體驗。

我正在使用緩存頭，因此只會發生一次，但是如果根本不發生，那還是很好。

在頁面滾動以使過渡無縫之前，如何加載第二個CSS圖像？

我只是試圖在后台加載此圖像 ，而不在顯示或任何內容之前預加載頁面上的所有圖像...

我正在使用的當前代碼...

jQuery的

jQuery(window).scroll(function(){
var fromTopPx = 200; // distance to trigger
var scrolledFromtop = jQuery(window).scrollTop();
if(scrolledFromtop > fromTopPx){
    jQuery('html').addClass('scrolled');
}else{
    jQuery('html').removeClass('scrolled');
}
});

CSS

html {
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

html {
background-image:url(http://robt.info/wp-content/uploads/2013/06/funny-kids-comic-animals.jpg);
}

html.scrolled {
background-image:url(http://robt.info/wp-content/uploads/2013/06/funny-kids-comic-animals_2.jpg);
}

演示 -滾動查看實際效果。

Answer 1

這里的幾種選擇：

1. 添加一個隱藏元素並將您的圖像添加為背景； 瀏覽器將加載它，並且足夠聰明，知道它不需要重新加載

2. 我認為更干凈的方式是：將第二張圖片加載到第一張圖片的后面：

html {
    background-image: url(http://robt.info/wp-content/uploads/2013/06/funny-kids-comic-animals.jpg),
                      url(http://robt.info/wp-content/uploads/2013/06/funny-kids-comic-animals_2.jpg);
}

html.scrolled {
    background-image:url(http://robt.info/wp-content/uploads/2013/06/funny-kids-comic-animals.jpg);
}

Answer 2

在左側添加所有圖像，並使所有圖像都絕對定位

img{
    position :absolute;
    z-index:1;
   }

因此所有圖像將在Windows加載時加載。 並根據滾動更改其z索引。

Answer 3

還有一個選擇是使您的圖像在單個精靈中，並通過更改位置顯示它們。這樣，您將節省1個額外的http調用本身。 您可以使用http://spritegen.website-performance.org/創建圖像精靈