Question

这是QUESTION I ASKED YESTERDAY的延续和THIS QUESTION的拍摄。

基本上，我使用jquery来改变页面滚动时的css背景图像，但是在第一次访问时，当滚动背景改变时它只会开始加载然后会导致糟糕的用户体验。

我正在使用缓存标头，这样只会发生一次，但如果它根本没有发生，那将会很好。

如何在页面滚动之前加载第二个CSS图像以使转换无缝？

我只是尝试在后台加载this one image，而不是在显示之前预先加载页面上的所有图片或其他任何内容......

我正在使用的当前代码......

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);
}

DEMO - 滚动查看实际情况。

Answer 1

这里几个选项：

添加隐藏元素并将图片添加为背景;浏览器将加载它并且足够聪明，知道它不需要重新加载
我认为更清洁的方法是：将第二张图片加载到第一张图片后面：

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-index。

Answer 3

还有一个选择是在单个精灵中制作你的图像并通过改变位置来显示它们。这样你就可以节省1个额外的http调用。你可以使用http://spritegen.website-performance.org/

创建图像精灵

如何强制下载未使用的CSS图像？

3 个答案: