介绍CSS实现网页打开时加载图片的方法

发布时间:2020-04-30编辑:脚本学堂
实现网页打开时加载图片的方法有很多种,本文主要介绍用css实现网页打开时加载图片的两种方法,需要的朋友参考一下。

让网页在打开的时候就加载图片经常用到,比如当你做一个可以随变色的导航条。假如不在网页打开时就加载那些图片,就会延迟网站显示导航图片的时间,结果会造成一些延迟的情况,影响用户体验。预载将在页面加载的时候加载那些图片并将其存储在浏览器的缓存里面。这样当用户滚动导航的时候,流畅,没有延迟。通常预加载图片用的是javascript。这里介绍用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%; }