利用JavaScript、Ajax及CSS3实现图片预加载

最新推荐文章于 2022-01-27 10:29:09 发布

原创最新推荐文章于 2022-01-27 10:29:09 发布 · 845 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#ajax #javascript #css3

JAVASCRIPT基础同时被 3 个专栏收录

25 篇文章

订阅专栏

CSS与HTML

21 篇文章

订阅专栏

图片专栏

7 篇文章

订阅专栏

导语

多图片网页很多都用了预加载图像，预加载图像是改善用户体验的好方法。但苦于网上找好资料不容易，特地研究了下，一起参考学习

仅使用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定位将图像远离屏幕。

优点
这种技术现在在支持性浏览器中运行良好，支持只能更好地转移到未来。请注意，我们可以通过将一个图像预加载为单个背景属性值来包括部分回退机制。没有获得多个东西的浏览器将会替换为单值背景属性。
此外，浏览器对CSS的支持比JavaScript好得多，所以在那里有很大的改进。除了这些东西，选择一个元素和添加我们所有的预加载图像作为背景的简单易用性是不容易利用的。
缺点
嗯，让我们看看…目前的浏览器支持不如它可能，主要是因为Internet Explorer。所以除了事实上，IE可能永远不会理解多个背景图像，使用这种方法的缺点几乎没有，我可以说，也许我错过了一些完全明显的东西？也许有人会阐述CSS的非现象使用？
https://perishablepress.com/preload-images-css3/
https://perishablepress.com/3-ways-preload-images-css-javascript-ajax/