网站内容及实现方式(预加载图片是提高用户体验的一个很好方法。)

　　网站内容及实现方式(预加载图片是提高用户体验的一个很好方法。)

　　预加载图像是改善用户体验的好方法。图片预加载到浏览器中，访问者可以在您的网站上流畅浏览，享受极快的加载速度。这对于图片占很大比例的图库和网站来说是非常有利的。它可以确保快速无缝地发布图片，还可以帮助用户在浏览您的网站 内容用户体验时获得更好的结果。本文将分享三种不同的预加载技术，以增强 网站 的性能和可用性。

　　方法一：使用CSS和JavaScript实现预加载

　　实现图片预加载的方法有很多种，包括使用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 属性将图像预加载到离屏背景上。只要这些图片的路径保持不变，当它们在网页的其他地方被调用时，浏览器在渲染过程中就会使用预加载（缓存）的图片。简单高效，无需任何 JavaScript。

　　这种方法虽然有效，但仍有改进的余地。使用此方法加载的图像将与页面上的其他内容一起加载，从而增加页面的整体加载时间。为了解决这个问题，我们添加了一些 JavaScript 代码，将预加载时间推迟到页面加载完成。代码显示如下：

<p>

// better image preloading @ <A href="a href='http://perishablepress.com/press/2009/12/28/3-ways-preload-images-css-javascript-ajax/">http://perishablepress.com/press/2009/12/28/3-ways-preload-images-css-javascript-ajax/