抛弃Javascript预载吧,牛人纯CSS图片预加载

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

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

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

  这是一个例子:

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

it知识库抛弃Javascript预载吧,牛人纯CSS图片预加载,转载需保留来源!

郑重声明:本文版权归原作者所有,转载文章仅为传播更多信息之目的,如作者信息标记有误,请第一时间联系我们修改或删除,多谢。