fix(infiniteGrid): check image size when initializing (naver#214)

ref naver#178
yoooom · May 17, 2016 · 3f0fddf · 3f0fddf
1 parent 5de6a78
commit 3f0fddf
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 31 deletions.
diff --git a/src/infiniteGrid.js b/src/infiniteGrid.js
@@ -300,6 +300,9 @@ eg.module("infiniteGrid", ["jQuery", eg, window, document, "Outlayer"], function
 			return doc.body.scrollTop || doc.documentElement.scrollTop;
 		},
 		_onScroll: function() {
+			if (this.core && !this.core._isLayoutInited) {
+				return;
+			}
 			if (this.isProcessing()) {
 				return;
 			}
@@ -365,6 +368,9 @@ eg.module("infiniteGrid", ["jQuery", eg, window, document, "Outlayer"], function
 			if (this.resizeTimeout) {
 				clearTimeout(this.resizeTimeout);
 			}
+			if (this.core && !this.core._isLayoutInited) {
+				return;
+			}
 			var self = this;
 			function delayed() {
 				self._refreshViewport();
@@ -468,7 +474,10 @@ eg.module("infiniteGrid", ["jQuery", eg, window, document, "Outlayer"], function
 			while (v = this.core.items[i++]) {
 				v.isAppend = true;
 			}
-			this.core.layout();
+			!this.core._isLayoutInited ?
+				this._waitResource(this.core.$element, function() {
+					this.core.layout();
+				}) : this.core.layout();
 			return this;
 		},
 		/**
@@ -531,7 +540,6 @@ eg.module("infiniteGrid", ["jQuery", eg, window, document, "Outlayer"], function
 			this._reset();
 			this.layout();
 			return this;
-
 		},
 
 		_getTopItem: function() {
@@ -654,21 +662,26 @@ eg.module("infiniteGrid", ["jQuery", eg, window, document, "Outlayer"], function
 				this.core.items = items.concat(this.core.items.slice(0));
 				items = items.reverse();
 			}
-			if (this.isRecycling()) {
-				this._adjustRange(isAppend, $cloneElements);
-			}
+			this.isRecycling() && this._adjustRange(isAppend, $cloneElements);
+
 			var noChild = this.core.$element.children().length === 0;
 			this.core.$element[isAppend ? "append" : "prepend"]($cloneElements);
 			noChild && this.core.resetLayout();		// for init-items
 
-			var needCheck = this._checkImageLoaded($cloneElements);
+			this._waitResource($cloneElements, function() {
+				this.core.layoutItems(items, true);
+			});
+		},
+		_waitResource: function($element, callback) {
+			var needCheck = this._checkImageLoaded($element);
 			if (needCheck.length > 0) {
-				this._waitImageLoaded(items, needCheck);
+				this._waitImageLoaded(needCheck, callback);
 			} else {
-				// convert to async
 				var self = this;
+
+				// convert to async
 				setTimeout(function() {
-					self.core.layoutItems(items, true);
+					callback && self.core && callback.apply(self);
 				}, 0);
 			}
 		},
@@ -754,9 +767,7 @@ eg.module("infiniteGrid", ["jQuery", eg, window, document, "Outlayer"], function
 			var y = this.core.updateCols();	// for prepend
 			while (item = this.core.items[i++]) {
 				item.position.y -= y;
-				applyDom && item.css({
-					"top": item.position.y + "px"
-				});
+				applyDom && $.style(item.element, "top", item.position.y + "px");
 			}
 			this.core.updateCols(true);	// for append
 			height = this.core._getContainerSize().height;
@@ -800,13 +811,13 @@ eg.module("infiniteGrid", ["jQuery", eg, window, document, "Outlayer"], function
 			});
 			return needCheck;
 		},
-		_waitImageLoaded: function(items, needCheck) {
-			var core = this.core;
+		_waitImageLoaded: function(needCheck, callback) {
+			var self = this;
 			var checkCount = needCheck.length;
 			var onCheck = function(e) {
 				checkCount--;
 				$(e.target).off("load error");
-				checkCount <= 0 && core.layoutItems(items, true);
+				checkCount <= 0 && callback && self.core && callback.apply(self);
 			};
 			$.each(needCheck, function(k, v) {
 				$(v).on("load error", onCheck);

diff --git a/test/manual/infiniteGird_demo.html b/test/manual/infiniteGird_demo.html
@@ -101,8 +101,11 @@ <h2>InfiniteGrid Demo</h2>
 };
 $(function() {
 	var $grid = $("#grid");
+	$grid.append(template(data.getItems(0)));
+
 	var ig = new eg.InfiniteGrid("#grid", {
-		count : 60
+		count : 60,
+		defaultGroupKey : 0
 	}).on({
 		"append" : function(e) {
 			var gk = this.getGroupKeys();

diff --git a/test/unit/js/infiniteGrid.test.js b/test/unit/js/infiniteGrid.test.js
@@ -68,21 +68,18 @@ module("infiniteGrid initailization/destroy Test", {
 
 test("check a initialization (there are children)", function(assert) {
 	// Given
+	// When
 	var done = assert.async();
 	this.inst = new eg.InfiniteGrid("#grid");
-	this.inst.on("layoutComplete",function(e) {
+	this.inst.on("layoutComplete", function(e) {
 		// Then
 		equal(e.target.length, 6, "a number of elements are 6");
 		equal(this.core.items.length, 6, "a number of elements are 6");
 		equal(this.isProcessing(), false, "idel in layoutComplete");
 		done();
 	});
-	// When
 	// Then
-	equal(this.inst.isProcessing(), false, "idel");
-
-	// When
-	this.inst.layout();
+	equal(this.inst.isProcessing(), true, "ing...");
 });
 
 test("check a append after a initialization (there aren't children)", function(assert) {
@@ -519,10 +516,9 @@ test("restore status", function(assert) {
 test("check a clear", function(assert) {
 	var done = assert.async();
 	// Given
+	// When
 	var beforeClear = true;
-	this.inst = new eg.InfiniteGrid("#grid", {
-		"isInitLayout" : false
-	});
+	this.inst = new eg.InfiniteGrid("#grid");
 	this.inst.on("layoutComplete",function(e) {
 		// Then
 		if(beforeClear) {
@@ -545,12 +541,6 @@ test("check a clear", function(assert) {
 			done();
 		}
 	});
-	// When
-	// Then
-	equal(this.inst.isProcessing(), false, "idel");
-
-	// When
-	this.inst.layout();
 });
 
 test("Check public methods return", function () {