1

这是我昨天问的一个问题的延续，也是这个问题的一个分支。

基本上，我使用 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);
}

演示- 滚动查看实际操作。

4

3 回答 3

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);
}
于 2013-07-12T03:29:46.863 回答
0

在左侧添加您所有的图像，并使它们都绝对定位

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

因此，所有图像都将在 Windows 加载时加载。只需根据滚动更改它们的 z-index 即可。

于 2013-07-12T03:37:45.873 回答
0

另一种选择是在单个精灵中制作您的图像并通过更改位置来显示它们..这样您将自己节省 1 个额外的 http 调用。您可以使用http://spritegen.website-performance.org/创建图像精灵

于 2013-07-12T05:03:05.530 回答