lazyload.min._LazyLoad 2.0简介

lazyload.min.

While improvements in browsers means more cool APIs for us to play with, it also means we need to maintain existing code.  With Firefox 4's release came news that my MooTools LazyLoad plugin was not intercepting image loading -- the images were loading regardless of the plugin, much like it always had with WebKit-based browsers.  Intercepting had continued to work within Internet Explorer but IE's reign of dominance is dying.  Clearly I needed to bite the bullet and code LazyLoad to use custom data- attributes to store the real image path.

浏览器的改进意味着我们可以使用更酷的API，但这也意味着我们需要维护现有代码。 随着Firefox 4的发布，有消息说我的MooTools LazyLoad插件没有拦截图像加载-不管插件如何，图像都在加载，这与基于WebKit的浏览器一样。 侦听一直在Internet Explorer中进行，但是IE的统治地位正在消失。 显然，我需要咬一口气，并为LazyLoad编写代码以使用自定义数据属性来存储实际图像路径。

Note:  It was always apparent that using custom attributes would become a necessity, but I hated doing so.  The big issue is with this is that it completely bricks image viewing for browsers which don't support JavaScript.  Since popular demand is calling for the data- attributes, and browsers are moving toward loading images before JS can intercept them, this was the really the only option.

注意：很明显，使用自定义属性将成为必要，但是我讨厌这样做。 最大的问题是，它为不支持JavaScript的浏览器完全阻塞了图像浏览。 由于流行的需求正在要求数据属性，并且浏览器正朝着在JS无法拦截图像之前加载图像的方向发展，因此，这实际上是唯一的选择。

View Demo 查看演示 Download LazyLoad 下载LazyLoad

Enter LazyLoad 2.0.  This second generation of MooTools LazyLoad does introduce breaking changes but the class itself is more compact and dynamic.  Here's the new class:

输入LazyLoad 2.0。 第二代MooTools LazyLoad确实引入了重大更改，但类本身更加紧凑和动态。 这是新班级：

var LazyLoad = new Class({

	Implements: [Options,Events],

	/* additional options */
	options: {
		range: 200,
		elements: "img",
		container: window,
		mode: "vertical",
		realSrcAttribute: "data-src",
		useFade: true
	},

	/* initialize */
	initialize: function(options) {
		
		// Set the class options
		this.setOptions(options);
		
		// Elementize items passed in
		this.container = document.id(this.options.container);
		this.elements = document.id(this.container == window ? document.body : this.container).getElements(this.options.elements);
		
		// Set a variable for the "highest" value this has been
		this.largestPosition = 0;
		
		// Figure out which axis to check out
		var axis = (this.options.mode == "vertical" ? "y": "x");
		
		// Calculate the offset
		var offset = (this.container != window && this.container != document.body ? this.container : "");

		// Find elements remember and hold on to
		this.elements = this.elements.filter(function(el) {
			// Make opacity 0 if fadeIn should be done
			if(this.options.useFade) el.setStyle("opacity",0);
			// Get the image position
			var elPos = el.getPosition(offset)[axis];
			// If the element position is within range, load it
			if(elPos < this.container.getSize()[axis] + this.options.range) {
				this.loadImage(el);
				return false;
			}
			return true;
		},this);
		
		// Create the action function that will run on each scroll until all images are loaded
		var action = function(e) {
			
			// Get the current position
			var cpos = this.container.getScroll()[axis];
			
			// If the current position is higher than the last highest
			if(cpos > this.largestPosition) {
				
				// Filter elements again
				this.elements = this.elements.filter(function(el) {
					
					// If the element is within range...
					if((cpos + this.options.range + this.container.getSize()[axis]) >= el.getPosition(offset)[axis]) {
						
						// Load the image!
						this.loadImage(el);
						return false;
					}
					return true;
					
				},this);
				
				// Update the "highest" position
				this.largestPosition = cpos;
			}
			
			// relay the class" scroll event
			this.fireEvent("scroll");
			
			// If there are no elements left, remove the action event and fire complete
			if(!this.elements.length) {
				this.container.removeEvent("scroll",action);
				this.fireEvent("complete");
			}
			
		}.bind(this);
		
		// Add scroll listener
		this.container.addEvent("scroll",action);
	},
	loadImage: function(image) {
		// Set load event for fadeIn
		if(this.options.useFade) {
			image.addEvent("load",function(){
				image.fade(1);
			});
		}
		// Set the SRC
		image.set("src",image.get(this.options.realSrcAttribute));
		// Fire the image load event
		this.fireEvent("load",[image]);
	}
});

Using LazyLoad is as simple as:

使用LazyLoad很简单：

<script>
/* do it! */
window.addEvent("domready",function() {
	var lazyloader = new LazyLoad();
});
</script>

<!-- then in the body -->

<!-- in-page image format -->
<img src="/images/blank.gif" data-src="/images/102_1139.jpg" />
<img data-src="/images/102_1139.jpg" />

Changes to version 2.0 of LazyLoad include:

对LazyLoad 2.0版的更改包括：

• You may now fade images in upon load
  您现在可以在加载时淡入图像

• Uses a customizable data- attribute to store the real image src.

  使用可定制的data-属性存储真实图像src。

• The resetDimensions options is no longer available
  resetDimensions选项不再可用
• Document size is calculated during scroll, as dynamic pages change in size frequently.
  文档大小是在滚动过程中计算的，因为动态页面的大小经常更改。
• Class code size is much smaller.
  类代码的大小要小得多。

View Demo 查看演示 Download LazyLoad 下载LazyLoad

Lazy-loading images will never go out of style, as it saves your server bandwidth and saves your users from load images that they never scroll to.  Adding a fade effect allows for images to be gracefully placed within the page.  Let me know if you have further ideas for LazyLoad, as it should only get better!

延迟加载图像永远不会过时，因为它可以节省服务器带宽，并使用户免于加载他们永不滚动的图像。 添加淡入淡出效果可将图像优雅地放置在页面中。 让我知道您是否对LazyLoad有更多的想法，因为它应该会变得更好！

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

lazyload.min.