纯CSS图片预加载

来源：互联网发布：交换机每个端口带宽编辑：程序博客网时间：2024/04/29 14:53

有很多种方法来实现图片的预加载，通常大部分使用Javascript让事情滚动。不要再受Javascript预载的束缚了吧，用CSS你就可以毫不麻烦的预载你的图片。

为什么使用预载

你为什么会考虑使用预载呢？你是否曾有个网站，在那个网站你要滚动你的导航然后有个延迟直到图片被加载完……嘿嘿。预载将在这方面帮助你。它将在页面加载的时候加载那些图片并将其存储在浏览器的缓存里面。这样当用户滚动导航的时候，很漂亮而且流畅，没有延迟。

CSS代码

这个概念就是写一个CSS样式设置一批背景图片，然后将其隐藏，这样你就看不到那些图片了。那些背景图片就是你想预载的图片。

这是一个例子:

#preloader {
/* Images you want to preload*/
background-image: url(image1.jpg);
background-image: url(image2.jpg);
background-image: url(image3.jpg);
width: 0px;
height: 0px;
display: inline;
}

这只是一种隐藏你的图片的方法，所以它们不会被显示。我也见到有人使用非常大的background-position值将图片推出去。或者给一个负的margin值。有很多中方法隐藏你要预载的图片，选择最适合你的吧。

另一种情况

有巨大的图片需要下载的情况并不会经常发生，如果你采用通常的做法，提供某种图片正在加载的表示。这里是一些CSS，可以给用户一个提示：图片正在加载。

img { background: url(loadingHourGlass.gif) no-repeat 50% 50%; }

gif图片可以是动画，类似于mac上的沙滩球或者PC上的沙漏之类的东东。采用一个动画吧，这样用户就会知道事情正在进行。

结论

当预载有意义的时候做你最好的吧，你的用户将以此喜欢上你。事实上他们可能并没有注意到，但是这是一件好事情，如果他们注意到你的网站正在加载，那可能真的是太慢了。

查看Demo

关于实例一的特别说明

首先多谢评论中网友提出的问题，翻译完这篇文章之后，考虑到一个css规则中多次定义同一个属性，浏览器一般只会处理最后一个，决定有必要做一下检验，但是没有意识到事情的严重性，所以没有及时处理，以至于可能会造成一些误解。

根据我的测试，大部分浏览器都是只加载了最后一个图片，前两个图片被无视了。但是在webkit核心的浏览器中，比如chrome，会预加载这三个图片。实例一为我们提供了一个很好的处理问题的思路，但是对于在同一个css样式中加载多个图片的用法，可能还要等css3的多背景图片属性被更多的浏览器支持才行。

PS:我来解释一下这个demo吧。可能原作者没有考虑太多，只是想演示一下预加载的效果，所以这个demo页面做的有些简单：他只是将预载的图片用于a:hover的背景了，这样在鼠标经过的时候，就可以无闪动的现实那张图片。嗯，也就是文中的第二种用法……

译文原文：
http://www.qianduan.net/pure-css-image-preloader.html

本文链接：http://www.blueidea.com/tech/web/2009/7119.asp

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><!-- saved from url=(0049)http://www.devirtuoso.com/Examples/CSS-Preloader/ --><HTML><HEAD><TITLE>CSS Preloader</TITLE><META content="text/html; charset=utf-8" http-equiv=Content-type><SCRIPT type=text/javascript>window.mod_pagespeed_start = Number(new Date());</SCRIPT><STYLE type=text/css media=screen>#preloader {BACKGROUND-IMAGE: url(http://1-ps.googleusercontent.com/h/www.devirtuoso.com/wp-content/uploads/2009/07/xhttp-status-codes.jpg.pagespeed.ic.DjVpHZQzMf.jpg); WIDTH: 0px; DISPLAY: inline; HEIGHT: 0px}A#sample:link {BACKGROUND-IMAGE: url(http://1-ps.googleusercontent.com/h/www.devirtuoso.com/wp-content/uploads/2009/07/xcss-preloader.jpg.pagespeed.ic.e4aofIgqob.jpg); WIDTH: 200px; DISPLAY: block; HEIGHT: 200px}A#sample:hover {BACKGROUND-IMAGE: url(http://1-ps.googleusercontent.com/h/www.devirtuoso.com/wp-content/uploads/2009/07/xhttp-status-codes.jpg.pagespeed.ic.DjVpHZQzMf.jpg)}</STYLE><META name=GENERATOR content="MSHTML 8.00.7601.17514"></HEAD><BODY><NOSCRIPT><META content="0;url='http://www.devirtuoso.com/Examples/CSS-Preloader/?ModPagespeed=noscript'" http-equiv=refresh><STYLE>TABLE {DISPLAY: none}DIV {DISPLAY: none}SPAN {DISPLAY: none}FONT {DISPLAY: none}P {DISPLAY: none}</STYLE><DIV style="DISPLAY: block">Please click <A href="http://www.devirtuoso.com/Examples/CSS-Preloader/?ModPagespeed=noscript">here</A> if you are not redirected within a few seconds.</DIV></NOSCRIPT><DIV id=preloader></DIV><A id=sample href="http://www.devirtuoso.com/Examples/CSS-Preloader/#"></A><SCRIPT type=text/javascript pagespeed_no_defer="">(function(){var e=window,f=Math,g="round",h="",q="&abt=",x="&act=",y="&adt=",z="&afd=",A="&attfb=",B="&mfd=",C="&nbt=",D="&nct=",E="&ndt=",F="&nfd=",G="&nttfb=",H="&rit_css=",I="&rit_img=",J="&rit_link=",K="&rit_script=";e.pagespeed=e.pagespeed||{};var L=e.pagespeed;L.getResourceTimingData=function(){if(e.performance&&e.performance.webkitGetEntries){for(var r=0,s=0,k=0,t=0,l=0,u=0,m=0,v=0,n=0,w=0,p=0,c={},d=e.performance.webkitGetEntries(),b=0;b<d.length;b++){var a=d[b].duration;0<a&&(r+=a,++k,s=f.max(s,a));a=d[b].connectEnd-d[b].connectStart;0<a&&(u+=a,++m);a=d[b].domainLookupEnd-d[b].domainLookupStart;0<a&&(t+=a,++l);a=d[b].initiatorType;c[a]?++c[a]:c[a]=1;a=d[b].requestStart-d[b].fetchStart;0<a&&(w+=a,++p);a=d[b].responseStart-d[b].requestStart;0<a&&(v+=a,++n)}return z+(k?f[g](r/k):0)+F+k+B+f[g](s)+x+(m?f[g](u/m):0)+D+m+y+(l?f[g](t/l):0)+E+l+q+(p?f[g](w/p):0)+C+p+A+(n?f[g](v/n):0)+G+n+(c.css?H+c.css:h)+(c.link?J+c.link:h)+(c.script?K+c.script:h)+(c.img?I+c.img:h)}return h};L.getResourceTimingData=L.getResourceTimingData;})();(function(){var c=window,f="performance",h="",k="&",l="&b_csi=",m="&bci=",n="&cces=",p="&ccis=",q="&ccos=",r="&ccrl=",s="&ccul=",t="&connect=",u="&dns=",v="&dom_c=",w="&dwld=",x="&fp=",y="&htmlAt=",z="&ifr=0",A="&ifr=1",B="&nav=",C="&nrp=",D="&nt=",E="&r",F="&req_start=",G="&ttfb=",H="&url=",I="=",J="?",K="EventStart",L="beforeunload",M="ets=",N="load",O="load:",P="on",Q="unload:";c.pagespeed=c.pagespeed||{};var R=c.pagespeed,S=function(a,d,b,e){this.d=a;this.a=d;this.b=b;this.e=e};R.beaconUrl=h;S.prototype.c=function(){var a=this.d,d=c.mod_pagespeed_start,b=Number(new Date)-d,a=a+(-1==a.indexOf(J)?J:k),a=a+M+(this.a==N?O:Q),a=a+b;if(!(this.a==L&&c.mod_pagespeed_loaded)){a+=E+this.a+I;if(c[f]){var b=c[f].timing,e=b.navigationStart,g=b.requestStart,a=a+(b[this.a+K]-e),a=a+(B+(b.fetchStart-e)),a=a+(u+(b.domainLookupEnd-b.domainLookupStart)),a=a+(t+(b.connectEnd-b.connectStart)),a=a+(F+(g-e)),a=a+(G+(b.responseStart-g)),a=a+(w+(b.responseEnd-b.responseStart)),a=a+(v+(b.domContentLoadedEventStart-e));c[f].navigation&&(a+=D+c[f].navigation.type);e=-1;b.msFirstPaint?e=b.msFirstPaint:c.chrome&&c.chrome.loadTimes&&(e=Math.floor(1E3*c.chrome.loadTimes().firstPaintTime));-1!=e&&(a+=x+(e-g))}else a+=b;R.getResourceTimingData&&c.parent==c&&(a+=R.getResourceTimingData());a+=c.parent!=c?A:z;this.a==N&&(c.mod_pagespeed_loaded=!0,(b=c.mod_pagespeed_num_resources_prefetched)&&(a+=C+b),(b=c.mod_pagespeed_prefetch_start)&&(a+=y+(d-b)));R.panelLoader&&(d=R.panelLoader.getCsiTimingsString(),d!=h&&(a+=l+d),d=R.panelLoader.getCriticalImagesInfoString(),d!=h&&(a+=m+d));R.criticalCss&&(d=R.criticalCss,a+=p+d.total_critical_inlined_size+n+d.total_original_external_size+q+d.total_overhead_size+r+d.num_replaced_links+s+d.num_unreplaced_links);this.b!=h&&(a+=this.b);a+=H+encodeURIComponent(this.e);R.beaconUrl=a;(new Image).src=a}};R.f=function(a,d,b,e){var g=new S(a,d,b,e);c.addEventListener?c.addEventListener(d,function(){g.c()},!1):c.attachEvent(P+d,function(){g.c()})};R.addInstrumentationInit=R.f;})();pagespeed.addInstrumentationInit('http://1-ps.googleusercontent.com/beacon?org=96_1_go', 'load', '', 'http://www.devirtuoso.com/Examples/CSS-Preloader/');</SCRIPT></BODY></HTML>