mootools_MooTools简介LazyLoad

mootools

Once concept I'm very fond of is lazy loading. Lazy loading defers the loading of resources (usually images) until they are needed. Why load stuff you never need if you can prevent it, right? I've created LazyLoad, a customizable MooTools plugin that allows you to only load images when the user scrolls down near them.

我非常喜欢的概念是延迟加载。 延迟加载推迟了资源(通常是图像)的加载，直到需要它们为止。 如果可以防止，为什么装载不需要的东西，对吗？ 我创建了LazyLoad，这是一个可自定义的MooTools插件，该插件可让您仅在用户向下滚动图像时才加载图像。

View Demo 查看演示 Download 下载

MooTools JavaScript类 (The MooTools JavaScript Class)

/* lazyload */
var LazyLoad = new Class({
	
	Implements: [Options,Events],
	
	/* additional options */
	options: {
		range: 200,
		image: 'blank.gif',
		resetDimensions: true,
		elements: 'img',
		container: window
	},
	
	/* initialize */
	initialize: function(options) {
		
		/* vars */
		this.setOptions(options);
		this.container = $(this.options.container);
		this.elements = $$(this.options.elements);
		this.containerHeight = this.container.getSize().y;
		this.start = 0;
	
		/* find elements remember and hold on to */
		this.elements = this.elements.filter(function(el) {
			/* reset image src IF the image is below the fold and range */
			if(el.getPosition(this.container).y > this.containerHeight + this.options.range) {
				el.store('oSRC',el.get('src')).set('src',this.options.image);
				if(this.options.resetDimensions) {
					el.store('oWidth',el.get('width')).store('oHeight',el.get('height')).set({'width':'','height':''});
				}
				return true;
			}
		},this);
		
		/* create the action function */
		var action = function() {
			var cpos = this.container.getScroll().y;
			if(cpos > this.start) {
				this.elements = this.elements.filter(function(el) {
					if((this.container.getScroll().y + this.options.range + this.containerHeight) >= el.getPosition(this.container).y) {
						if(el.retrieve('oSRC')) { el.set('src',el.retrieve('oSRC')); }
						if(this.options.resetDimensions) {
							el.set({
								width: el.retrieve('oWidth'),
								height: el.retrieve('oHeight') 
							});
						}
						this.fireEvent('load',[el]);
						return false;
					}
					return true;
				},this);
				this.start = cpos;
			}
			this.fireEvent('scroll');
			/* remove this event IF no elements */
			if(!this.elements.length) {
				this.container.removeEvent('scroll',action);
				this.fireEvent('complete');
			}
		}.bind(this);
		
		/* listen for scroll */
		this.container.addEvent('scroll',action);
	}
});

Options for LazyLoad include:

LazyLoad的选项包括：

• range: (defaults to 200) The amount of space from the container's bottom position that you want to look for images to load.

  范围：( 默认为200)要查找要加载的图像的容器底部位置的空间量。

• image: (defaults to "blank.gif") The image to replace the original image.

  图像：( 默认为“ blank.gif”)用于替换原始图像的图像。

• resetDimensions: (defaults to true) Removes the image's width and height attributes.

  resetDimensions：( 默认为true)删除图像的width和height属性。

• elements: (defaults to "img") Images to consider for lazy loading.

  elements ：( 默认为“ img”)要考虑延迟加载的图像。

• container: (defaults to window) The container for which to look for images within.

  container ：( 默认为window)在其中查找图像的容器。

Events for LazyLoad include:

LazyLoad的事件包括：

• onComplete: Fires when all images have been loaded.

  onComplete：加载所有图像时触发。

• onLoad: Fires on each individual image once it has been loaded.

  onLoad：加载每个单独的图像时触发。

• onScroll: Fires when the container is scrolled.

  onScroll：滚动容器时触发。

样本用法 (The Sample Usage)

/* very simple usage */
var lazyloader = new LazyLoad();

/* more customized usage */
var lazyloader = newLazyLoad({
	range: 120,
	image: 'logo.gif',
	resetDimensions: false,
	elements: 'img.lazyme'
});

View Demo 查看演示 Download 下载

增强功能 (Enhancements)

This class isn't perfect -- it does not defer loading of images above the page's starting point. If you work on a website with a lot of anchor links and you'd like lazyloading of images above the fold, you'll need to add a bit to this class. Also note that due to WebKit bug #6656, Safari will continue to load the originally images despite the plugin.

此类并非十全十美-不会延迟在页面起点上方加载图像。 如果您在具有许多锚点链接的网站上工作，并且希望在首屏上延迟加载图像，则需要向此类添加一些内容。 另请注意，由于WebKit错误＃6656 ，尽管有插件，Safari仍将继续加载原始图像。

Have any more suggestions? Share them!

还有其他建议吗？ 分享他们！

翻译自: https://davidwalsh.name/mootools-lazyload

mootools