您的位置：首页 > CSS > 纯CSS图片预加载

纯CSS图片预加载

神飞 发表于 27. Oct, 2009, 分类: CSS , 21 条评论 »
标签： & &
译自：Creating a CSS Image Preloader
中文：纯CSS图片预加载
版权所有转载请注明出处，多谢！

有很多种方法来实现图片的预加载，通常大部分使用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的背景了，这样在鼠标经过的时候，就可以无闪动的现实那张图片。嗯，也就是文中的第二种用法……

VN:F [1.9.3_1094]
Rating: 6.9/10 (54 votes cast)
纯CSS图片预加载, 6.9 out of 10 based on 54 ratings
作者: 神飞
爱好前端设计与开发，崇尚一目了然的设计。现居深圳。 Follow me on twitter @qianduan。

您或许也会喜欢：

如果你喜欢本文，欢迎 订阅本站 以获得本站最新内容。

21 个评论

  • Neway 发表于Oct 27, 2009 at 22:38

    早上在推上看到英文版，没看懂，现在看到中文还是不大懂，为什么demo里头鼠标移上图片时才显示正确图片？而且一点击就没了，confusing….

    Reply
    • 神采飞扬 发表于Oct 28, 2009 at 09:48

      在demo中，作者要演示的只是文中的第二种效果，但是好像他的这个例子不是很好。你可以看一下页面的源代码，他把预加载的图片用在a:hover中，这样你鼠标放到loading的那个图片上的时候，就可以无闪动的显示预加载的图片了。

      Reply
  • whatUwant 发表于Oct 27, 2009 at 23:31

    第二个很有新意！

    Reply
  • 佚名 发表于Oct 28, 2009 at 15:01

    如果系统有相关载入图标的话，直接加载图标，那岂不是更快了。。

    Reply
  • asdasdasd 发表于Oct 29, 2009 at 16:30

    background-image: url(image1.jpg);
    background-image: url(image2.jpg);
    background-image: url(image3.jpg);

    你确定3个都会被预加载么？ 这么写只有image3会被加载。

    height: 0px;
    display: inline;
    }

    Reply
    • 神采飞扬 发表于Oct 29, 2009 at 17:25

      你很细心，这个问题是我计划中但是还没有招手去做的事情。

      原作者的这种方式，在有些浏览器里面是可以加载三个图片的，比如webkit核心的浏览器，但是在其它浏览器中，一般只会加载最后一个。

      把这个作为一种解决问题的思路吧。

      多谢你的评论。

      Reply
      • asdasdasd 发表于Oct 29, 2009 at 17:30

        3年前做过一个项目，当时以为这样可以。后来实践是至少不能给IE和FF带来任何效果。 看到再次出现，遂评论二三。

        这个在Blueidea也发表了，上了首页,影响力挺大，还是完善一下，以免”误人子弟”.

        Reply
    • 小智 发表于Dec 10, 2009 at 21:52

      就说嘛 firebug 1,2肯定打删除线

      Reply
  • 青色 发表于Oct 30, 2009 at 10:48

    如果鼠标不移上去，别人可能会以为图片一直在加载。。。

    Reply
  • 我们学习网 发表于Nov 3, 2009 at 15:33

    很好的创新，学习一下，可惜不完善。呵呵

    Reply
  • roger 发表于Nov 18, 2009 at 21:48

    你好！ 你的博客用的是什么字体？很漂亮 是雅黑？？？
    还有标题很粗的字体是粗黑？怎么做呢？？？请教

    Reply
  • Linkjun 发表于Nov 19, 2009 at 09:55

    我测试过，只有image3.jpg可以流畅的加载进来，其他的却和往常没有多大的区别，希望神采飞扬有较好的方法，我们可以探讨一下。

    Reply
  • joey 发表于Dec 5, 2009 at 01:17

    可以多设置几个class，每个加载一个图片

    Reply
  • 沙漠 发表于Jan 22, 2010 at 10:29

    谢谢分享!

    Reply
  • mr.zero 发表于Apr 24, 2010 at 19:33

    谢谢分享!好东东

    Reply
  • Mini 发表于May 22, 2010 at 05:36

    直接把图片放进看不见的区块就可以了。

    #preloader {
    position: absolute;
    top: 0;
    left: -9999px;
    width: 500px;
    }

    </div.

    Reply

发表评论