CSS 怎么预加载图片? 下面本篇文章给大家介绍一下 CSS 图片预加载的方法. 有一定的参考价值, 有需要的朋友可以参考一下, 希望对大家有所帮助.
有很多种方法来实现图片的预加载, 通常大部分使用 JavaScript 让事情滚动. 不要再受 JavaScript 预载的束缚了吧, 用 CSS 你就可以毫不麻烦的预载你的图片.
为什么使用预载
你为什么会考虑使用预载呢? 你是否曾有个网站, 在那个网站你要滚动你的导航然后有个延迟直到图片被加载完...... 嘿嘿. 预载将在这方面帮助你. 它将在页面加载的时候加载那些图片并将其存储在浏览器的缓存里面. 这样当用户滚动导航的时候, 很漂亮而且流畅, 没有延迟.
用 CSS 实现预加载
实现预加载图片有很多方法, 包括使用 CSS,JavaScript 及两者的各种组合. 这些技术可根据不同设计场景设计出相应的解决方案, 十分高效.
单纯使用 CSS, 可容易, 高效地预加载图片, 代码如下:
- #preload-01 {
- background: url(http://domain.tld/image-01.png) no-repeat -9999px -9999px;
- }
- #preload-02 {
- background: url(http://domain.tld/image-02.png) no-repeat -9999px -9999px;
- }
- #preload-03 {
- background: url(http://domain.tld/image-03.png) no-repeat -9999px -9999px;
- }
将这三个 ID 选择器应用到 (X)html 元素中, 我们便可通过 CSS 的 background 属性将图片预加载到屏幕外的背景上. 只要这些图片的路径保持不变, 当它们在 web 页面的其他地方被调用时, 浏览器就会在渲染过程中使用预加载(缓存) 的图片. 简单, 高效, 不需要任何 JavaScript.
该方法虽然高效, 但仍有改进余地. 使用该法加载的图片会同页面的其他内容一起加载, 增加了页面的整体加载时间. 为了解决这个问题, 我们增加了一些 JavaScript 代码, 来推迟预加载的时间, 直到页面加载完毕. 代码如下:
- // better image preloading
- // @ http://perishablepress.com/press/2009/12/28/3-ways-preload-images-css-javascript-ajax/
- function preloader() {
- if (document.getElementById) {
- document.getElementById("preload-01").style.background =
- "url(http://domain.tld/image-01.png) no-repeat -9999px -9999px";
- document.getElementById("preload-02").style.background =
- "url(http://domain.tld/image-02.png) no-repeat -9999px -9999px";
- document.getElementById("preload-03").style.background =
- "url(http://domain.tld/image-03.png) no-repeat -9999px -9999px";
- }
- }
- function addLoadEvent(func) {
- var oldonload = Windows.onload;
- if (typeof Windows.onload != 'function') {
- Windows.onload = func;
- } else {
- Windows.onload = function() {
- if (oldonload) {
- oldonload();
- }
- func();
- }
- }
- }
- addLoadEvent(preloader);
在该脚本的第一部分, 我们获取使用类选择器的元素, 并为其设置了 background 属性, 以预加载不同的图片.
该脚本的第二部分, 我们使用 addLoadEvent()函数来延迟 preloader()函数的加载时间, 直到页面加载完毕.
如果 JavaScript 无法在用户的浏览器中正常运行, 会发生什么? 很简单, 图片不会被预加载, 当页面调用图片时, 正常显示即可.
结论
当预载有意义的时候做你最好的吧, 你的用户将以此喜欢上你. 事实上他们可能并没有注意到, 但是这是一件好事情, 如果他们注意到你的网站正在加载, 那可能真的是太慢了.
更多 Web 前端开发 https://www.html.cn/ 知识, 请查阅 HTML 中文网 !!
来源: http://www.css88.com/qa/css3/17639.html