仅使用JavaScript实现预加载多图片网页很多都用了预加载图像,预加载图像是改善用户体验的好方法。但苦于网上找好资料不容易,特地翻墙研究了两篇,一起参考学习
像以前的方法一样有效,我通常认为实际上实在太乏味和耗时。 相反,我通常更喜欢使用直线切片JavaScript来预加载图像。 以下是几种仅限JavaScript的预加载方法,可在几乎每个现代浏览器中精美地工作。
JavaScript方法1不引人注意,优雅地降级,易于实现,只需编辑/添加图像路径/名称,无需其他编辑:
<div class="hidden">
<script type="text/javascript">
<!--//--><![CDATA[//><!--
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"
)
//--><!]]>
</script>
</div>
该方法对于预加载大量图像特别方便。 在我的一个画廊网站上,我使用这种技术来预加载近50张图像。 通过将此脚本包含在登录页面以及内部金额页面上,大多数图库图像都将在用户输入登录凭据之前预先加载。很不错。
JavaScript方法2这是另一个类似的方法,它使用不引人注目的JavaScript来预加载任何数量的图像。 只需将以下脚本包含在您的任何网页中,然后根据以下说明进行编辑:
<div class="hidden">
<script type="text/javascript">
<!--//--><![CDATA[//><!--
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";
}
//--><!]]>
</script>
</div>
正如你所看到的,每个预加载的图像需要一个变量定义,“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 <head>
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方法。
CSS3实现图片预加载使用纯CSS3预览图像的更好的方式打击我:
.preload-images {
background: url(image-01.png) no-repeat -9999px -9999px;
background: url(image-01.png) no-repeat -9999px -9999px,
url(image-02.png) no-repeat -9999px -9999px,
url(image-03.png) no-repeat -9999px -9999px,
url(image-04.png) no-repeat -9999px -9999px,
url(image-05.png) no-repeat -9999px -9999px;
}
使用CSS3对多个背景图像的新支持,我们可以使用单个现有元素来预加载所有所需的图像。 将此方法与使用CSS预先加载图像的旧方法进行比较:
.preload-01 { background: url(image-01.png) no-repeat -9999px -9999px; }
.preload-02 { background: url(image-02.png) no-repeat -9999px -9999px; }
.preload-03 { background: url(image-03.png) no-repeat -9999px -9999px; }
.preload-04 { background: url(image-04.png) no-repeat -9999px -9999px; }
.preload-05 { background: url(image-05.png) no-repeat -9999px -9999px; }
您可以看到,CSS3方法是使用单个CSS选择器预先加载图像的更为清洁的方法。 请注意,我们还需要确保在preload元素中不显示背景图像。 为此,我想我们可以使用display:none隐藏元素,或者使用-9999px定位将图像远离屏幕。