Welcome, Old Sport!

Introducing LazyLoad 延迟加载效果

by ilikecss ON 2011/07/11 7706

有朋友问我博客里图片渐隐效果是哪个脚本,其实这个效果网上有许多版本,我使用还是很早的。我这里就简单介绍下这个功能: lazyload: 当网页页面滚动到相应的地方,对应位置的内容才进行加载显示,这样能明显减少了服务器的压力和流量,也能够减小浏览器的负担。今天推荐的是一个比较好的类似效果插件,喜欢的朋友请Down了使用。

Step1. 创建HTML

<!-- HTML CODE HERE -->
<img src="/images/blank.gif" data-src=".jpg" />
OR
<img data-src=".jpg" />

Step2. 插入jQuery和脚本包

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 &amp;&amp; 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 &lt; 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 &gt; 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]) &gt;= 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]);
	}
});
<script src="https://ajax.googleapis.com/ajax/libs/mootools/1.3.1/mootools.js"></script>
3条评论
  1. #1

    lz什么的最好了说道:

    谢谢LZ分享~

  2. #2

    Marvin说道:

    这个是不是像有些插件那样如果还没有显示出来是个叉烧包呢?能不能没显示出来就空过去,而不是显示叉烧包么?

    • Marvin说道:

      哦,抱歉。我看到DEMO了,是有个转动的loading提示的。




TOP