mootools_带有进度条的MooTools图像预加载

最新推荐文章于 2024-10-02 05:39:15 发布

culuo8053

最新推荐文章于 2024-10-02 05:39:15 发布

阅读量106

点赞数

文章标签：字符串 javascript js java vue ViewUI

原文链接：https://davidwalsh.name/mootools-image-preloading-progress-bar

版权

mootools

The idea of image preloading has been around since the dawn of the internet. When we didn't have all the fancy stuff we use now, we were forced to use ugly mouseover images to show dynamism. I don't think you were declared an official programmer until you had seen Macromedia Dreamweaver's mouseover function. MooTools image preloading requires very little code -- let me show you how it's done.

自Internet诞生以来，图像预加载的想法就已经存在。当我们没有现在使用的所有花哨的东西时，我们被迫使用难看的鼠标悬停图像来显示动态。在看到Macromedia Dreamweaver的鼠标悬停功能之前，我不认为您是正式程序员。 MooTools图像预加载只需要很少的代码-让我向您展示它是如何完成的。

If you haven't experienced the dwProgressBar class for MooTools, please read this article. I wont be featuring an explanation of that code in this article.

如果您还没有体验过MooTools的dwProgressBar类，请阅读此文章。 在本文中，我不会介绍该代码。

View Demo 观看演示

XHTML (The XHTML)


<div id="progress-bar"></div>
<div id="images-holder"></div>

I've created two DIVs which will act as "holders" for the progress bar and the images.

我创建了两个DIV，它们将用作进度条和图像的“持有人”。

MooTools JavaScript (The MooTools JavaScript)


window.addEvent('domready', function() {
	/* progress bar */
	var progressBar = new dwProgressBar({
		container: $('progress-bar'),
		startPercentage: 0,
		speed:750,
		boxID: 'box',
		percentageID: 'perc',
		displayID: 'text',
		displayText: true
	});
	
	/* preloading */
	var images = ['1.jpg','2.jpg','3.jpg','4.jpg','5.jpg','6.jpg','7.jpg','8.jpg','9.jpg','10.jpg'];
	var loader = new Asset.images(images, {
		onProgress: function(counter,index) {
			progressBar.set((counter + 1) * (100 / images.length));
		},
		onComplete: function() {
			images.each(function(im) {
				new Element('img',{ src:im, width:200, style:'width:200px;margin:20px 20px 20px 0;' }).inject($('images-holder'));
			});
		}
	});
});

The code to preload images is shockingly short. We provide Asset.images() an array of images (string paths to the images on the server). On every image load, we adjust the progress bar. Finally, once all images have loaded, we inject them into the image holding DIV.

预加载图像的代码非常短。我们为Asset.images()提供图像数组(服务器上图像的字符串路径)。在每次加载图像时，我们都会调整进度条。最后，所有图像加载完毕后，我们将其注入包含DIV的图像中。

View Demo 观看演示

Be sure to view the example featuring the ever-beautiful Christina Ricci!

一定要查看以美丽的克里斯蒂娜·里奇(Christina Ricci)为例的示例！