您现在的位置是：网站首页> 编程资料编程资料

纯CSS图片预加载实例摆脱Javascript预载的束缚30种CSS3炫酷页面预加载loading动画特效源码炫酷纯CSS3预加载动画特效源码 3种CSS3 预加载Loading动画特效源码CSS控制前端图片HTTP请求的各种情况示例CSS 实现网页图片的预加载纯CSS实现预加载动画效果

2021-09-07 813人已围观

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

上一篇：Web页面中八种创建多列等高(等高列布局)的实现技术css3中transform属性实现的4种功能详解CSS3.0(Cascading Style Sheet) 层叠级联样式表纯CSS3实现div按照顺序出入效果CSS3实现列表无限滚动/轮播效果css3 利用transform-origin 实现圆点分布在大圆上布局及旋转特效CSS3实现的侧滑菜单CSS3实现的3D隧道效果用CSS3画一个爱心css3 实现文字闪烁效果的三种方式示例代码六种css3实现的边框过渡效果

下一篇：css之六个为什么为您解答性能与习惯的结合

您现在的位置是：网站首页> 编程资料编程资料

相关内容

点击排行

本栏推荐

猜你喜欢