图片预加载进度条，基于Mootools Plugins Assets
大量采用高解析度的图像的确可以让一个Web站点容光焕发。但同样也会造成站点访问速度下降——图片是文件，文件就要占用带宽，而带宽直接同访问等待时间相关。现在，让我们来学习一种名为图像预装载（image preloading）的小技巧来提高图像访问速度。
一些浏览器试图通过在本地缓存中保存这些图片来解决此问题。这样一来可以顺序调用这些图片——但对于首次使用这些图片的时候仍然会存在延时。
预装载就是一种在需要图片之前就将图片下载到缓存的技术。采用这样的方式可以使当确实需要显示图片时迅速将其从缓存中恢复回来并立即显示。
知识扩展：图像预装载（image preloading）的小技巧。
我们今天说的《图片预加载进度条》是基于Mootools框架开发的。可以用于，当需要一次性加载多张图片的情况。
要实现《图片预加载进度条》效果，主要是通过 Mootools 的 Assets (提供在页面中动态加载和管理JavaScript, CSS和图片文件的功能) Plugins.
Assets 插件来实现的。
它主要有4个方法:Assets.javascript() ,Assets.css(),Assets.image(),Assets.images()，它们提供的功能就是动态加载和对JavaScript，CSS和图像文件的管理。
关于Assets 插件的具体语法和使用说明，请看官方文档 http://mootools.net/docs/more/Utilities/Assets
The MooTools Javascript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | 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']; //Asset.images 预加载一组图片文件 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')); }); } }); }); |
实例来源：http://davidwalsh.name/mootools-image-preloading-progress-bar
文章评论 已经有 0 条评论！