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

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

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

　　方法一：用 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 背景属性将图像预加载到屏幕外背景上。只要这些图像的路径保持不变，当在网页上的其他地方调用它们时，浏览器将在渲染期间使用预加载（缓存）的图像。简单、高效且不需要任何 JavaScript。

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

　　

　　

　　// better image preloading @ <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/</A> 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 = window.onload;

if (typeof window.onload != 'function') {

window.onload = func;

} else {

window.onload = function() {

if (oldonload) {

oldonload();

}

func();

}

}

}

addLoadEvent(preloader);

　　查看代码

　　在脚本的第一部分，我们使用类选择器获取元素并在其上设置背景属性以预加载不同的图像。

　　在脚本的第二部分，我们使用 addLoadEvent() 函数来延迟 preloader() 函数的加载时间，直到页面加载完毕。

　　如果 JavaScript 在用户的浏览器中不能正常工作会发生什么？很简单，图片不会被预加载，页面调用图片时可以正常显示。

　　方法 2：仅使用 JavaScript 预加载

　　上面的做法有时确实是有效率的，但是我们逐渐发现在实践中实施起来需要花费太多的时间。相反，我更喜欢使用纯 JavaScript 进行图像预加载。下面是两种在所有现代浏览器上都能完美运行的预加载方法。

　　JavaScript 片段 1

　　只需简单地编辑和加载所需图像的路径和名称，这很容易实现：

　　

　　

　　查看代码

　　此方法对于预加载大量图像特别有用。我的画廊 网站 使用这种技术预加载了 50 多张图片。将此脚本应用于登录页面，一旦用户输入登录帐户，大多数图库图像将被预加载。

　　JavaScript 片段 2

　　这个方法和上面的方法类似，也可以预加载任意数量的图片。将以下脚本添加到任何网页并根据程序说明进行编辑。

　　

　　

　　查看代码

　　可以看到，每次加载图片都需要创建一个变量，比如“img1 = new Image();”，以及图片源地址声明，比如“img3.src =

　　"../path/to/image-003.gif";". 参考这个模式，你可以加载任意数量的图像。

　　我们再次改进了这种方法。将脚本包装在一个函数中，并使用 addLoadEvent() 来延迟预加载时间，直到页面加载完毕。

　　

　　

　　function preloader() {

if (document.images) {

var img1 = new Image();

var img2 = new Image();

var img3 = new Image();

img1.src = "http://domain.tld/path/to/image-001.gif";

img2.src = "http://domain.tld/path/to/image-002.gif";

img3.src = "http://domain.tld/path/to/image-003.gif";

}

}

function addLoadEvent(func) {

var oldonload = window.onload;

if (typeof window.onload != 'function') {

window.onload = func;

} else {

window.onload = function() {

if (oldonload) {

oldonload();

}

func();

}

}

}

addLoadEvent(preloader);

　　查看代码

　　方法三：使用Ajax实现预加载

　　上面给出的方法看起来还不够酷，下面我们来看一个使用Ajax实现图片预加载的方法。该方法使用 DOM 来预加载图像，还包括 CSS、JavaScript 和其他相关内容。使用 Ajax 比直接使用 JavaScript 的好处是 JavaScript 和 CSS 的加载不会影响当前页面。该方法简单有效。

　　

　　

　　window.onload = function() {

setTimeout(function() {

// XHR to request a JS and a CSS var xhr = new XMLHttpRequest();

xhr.open('GET', 'http://domain.tld/preload.js');

xhr.send('');

xhr = new XMLHttpRequest();

xhr.open('GET', 'http://domain.tld/preload.css');

xhr.send('');

// preload image new Image().src = "http://domain.tld/preload.png";

}, 1000);

};

　　查看代码

　　上面的代码预加载了“preload.js”、“preload.css”和“preload.png”。1000ms 超时是为了防止脚本挂起并导致正常页面出现功能问题。

　　接下来，让我们看看如何在 JavaScript 中实现这个加载过程：

　　

　　

　　window.onload = function() {

setTimeout(function() {

// reference to

var head = document.getElementsByTagName('head')[0];

// a new CSS

var css = document.createElement('link');

css.type = "text/css";

css.rel = "stylesheet";

css.href = "http://domain.tld/preload.css";

// a new JS

var js = document.createElement("script");

js.type = "text/javascript";

js.src = "http://domain.tld/preload.js";

// preload JS and CSS head.appendChild(css);

head.appendChild(js);

// preload image

new Image().src = "http://domain.tld/preload.png";

}, 1000);

};

　　查看代码

　　这里我们通过DOM创建三个元素来实现三个文件的预加载。如上所述，使用 Ajax，加载文件不会应用于加载页面。从这个角度来看，Ajax 方法优于 JavaScript。