来源 |
预加载图像是改善用户体验的一个好技巧。 图像预加载在浏览器中，使访问者能够顺利浏览您的网站并享受极快的加载速度。
这对于图片库和占据图片比例较大的网站来说是非常有利的。 它确保图像能够快速、无缝地发布，还可以帮助用户在浏览您的网站内容时获得更好的用户体验。
本文将分享三种不同的预加载技术来提高网站性能和可用性。
方法一：使用css和JavaScript实现预加载
有很多方法可以实现预加载图像，包括使用 css、JavaScript 以及三者的各种组合。 这些技术可以根据不同的设计场景设计出相应的解决方案，效率非常高。
只需使用 CSSjavascript 显示图片，您就可以轻松高效地预加载图像。 代码如下：
#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 显示图片，但仍有改进的空间。 使用此方法加载的图像将与页面上的其他内容一起加载，从而增加页面的整体加载时间。
为了解决这个问题，我们减少了一些 JavaScript 代码来延迟预加载时间，直到页面加载完毕。 代码如下所示：
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
只需简单编辑并加载所需图片的路径和名称，即可轻松实现：
var images = new Array()
function preload() {
for (i = 0; i < preload.arguments.length; i++) {
images[i] = new Image()
images[i].src = preload.arguments[i]
}
}
preload(
"http://domain.tld/gallery/image-001.jpg",
"http://domain.tld/gallery/image-002.jpg",
"http://domain.tld/gallery/image-003.jpg"
)
该方法特别适合预加载大量图像。 我的画廊网站使用这种技术并预加载了 50 多张图像。 将此脚本应用到登录页面，每当用户输入登录帐户时，大多数图库图像都会被预加载。
JavaScript 代码片段 2
这个方法和前面的方法类似，也可以预加载任意数量的图片。 将以下脚本添加到任意网页，并根据程序说明进行编辑。
if (document.images) {
img1 = new Image();
img2 = new Image();
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";
}
可以看到，每次加载图片时，都需要创建一个变量，如“img1 = new Image();”，以及图片源地址声明，如“img3.src =”../path /到/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 和其他相关的东西。 与直接使用JavaScript相比，使用Ajax的优点是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”。 1000 毫秒超时是为了避免脚本挂起并导致正常页面出现功能问题。
接下来我们看看如何用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。
过去的推荐
2021 TWeb腾讯后端技术大会精彩回顾（附PPT）
面试题：谈谈风暴循环机制（满分答案来了）
2020年，对于一个专心工作、只想赚钱的后端女程序员来说
终于
点击观看并支持我
