mootools_使用MooTools LazyLoad淡入图像

mootools

I recently received an email from a MooTools developer asking a great question about my LazyLoad class:

我最近收到了MooTools开发人员的电子邮件，询问有关我的LazyLoad类的一个重大问题：

"I'm using your LazyLoad MooTools plugin (which is great, by the way). I have been trying to figure out how to modify it so that once an image scrolls into the viewport it loads and then fades in with a MooTools tween - so far I've had no luck. Is this easy to do?"

“我正在使用您的LazyLoad MooTools插件(顺便说一句，这很棒)。我一直在努力寻找如何修改它的方法，以便一旦图像滚动到视口中，它就会加载，然后随着MooTools补间淡入淡出-到目前为止，我还没有运气。这容易做到吗？”

In a word...yes. And you can do it without modifying any of the LazyLoad class source!

一句话...是的。 而且，您无需修改​​任何LazyLoad类源代码就可以做到这一点！

View Demo 观看演示

简单的MooTools JavaScript解决方案 (The Simple MooTools JavaScript Solution)

LazyLoad was created to provide the developer feedback via events. LazyLoad provides a load event which fires during each image load. You can add an onLoad option to the class instance to accomplish the fade:

创建LazyLoad是为了通过事件向开发人员提供反馈。 LazyLoad提供了一个load事件，该事件在每次加载图像时触发。 您可以将onLoad选项添加到类实例以完成淡入淡出：

//new instance
var lazyload = new LazyLoad({
	//onLoad event/option
	onLoad: function(img) {
		//set opacity to 0, fade it in!
		img.setStyle('opacity',0).fade(1);
	}
});

Once each image is loaded, its opacity is set to 0 and then the node is faded in. Note that LazyLoad's onLoad event isn't a true onLoad event for the image; this is because of caching / onLoad issues with IE. If you have concerns with the fade beating the true image load, one solution could be adding a slight delay:

加载每个图像后，将其opacity设置为0，然后淡入该节点。请注意， LazyLoad's onLoad事件不是该图像的真实onLoad事件；它不是图像的真实onLoad事件。 这是由于IE的缓存/ onLoad问题。 如果您担心淡入淡出会击败真实的图像负载，则一种解决方案可能是增加一些延迟：

//new instance
var lazyload = new LazyLoad({
	//onLoad event/option
	onLoad: function(img) {
		//set opacity to 0, fade it in after 100 milliseconds
		(function() { img.setStyle('opacity',0).fade(1); }).delay(100);
	}
});

View Demo 观看演示

Lazy loading images is a crapshoot. It doesn't work in WebKit-based browsers because of a bug they wont fix and IE doesn't provide a reliable onLoad event due to caching issues. In the end, my LazyLoad class does its best to accommodate for capable browsers. And the events I've implemented make any type of load effect easy!

延迟加载图像是一个小问题。 由于无法修复的错误，并且由于缓存问题，IE无法提供可靠的onLoad事件，因此它无法在基于WebKit的浏览器中使用。 最后，我的LazyLoad类竭尽所能以适应功能强大的浏览器。 而且我实现的事件使任何类型的加载效果变得容易！

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

mootools