如何强制下载未使用的CSS映像？
如何强制下载未使用的CSS映像？
提问于 2013-07-12 03:13:15
基本上，我使用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);
}演示 -滚动看在行动中。
回答 3
Stack Overflow用户
回答已采纳
发布于 2013-07-12 03:29:46
这里没有几种选择：
- 添加隐藏元素并添加图像作为背景；浏览器将加载它，并且足够聪明，可以知道它不需要重新加载
- 我认为更干净的方法是:在第一个图像之后加载第二个图像：
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);
}Stack Overflow用户
发布于 2013-07-12 03:37:45
在左侧添加所有图像，并使它们都处于绝对位置。
img{
position :absolute;
z-index:1;
}因此，所有的图像将加载到窗口加载。然后根据滚动图改变他们的z索引。
Stack Overflow用户
发布于 2013-07-12 05:03:05
另一种选择是，在单个sprite中生成您的图像，并通过更改position..in来显示它们，这样可以节省1次额外的http调用。U可以用http://spritegen.website-performance.org/创建图像精灵
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/17606927
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号