fix(infiniteGrid): fix FOUC (naver#269)

* fix(infiniteGrid): fix FOUC ref o-268
yeom1702 · Sep 1, 2016 · cfd8764 · cfd8764
1 parent b337b5c
commit cfd8764
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 24 deletions.
diff --git a/src/infiniteGrid.js b/src/infiniteGrid.js
@@ -88,7 +88,7 @@ eg.module("infiniteGrid", ["jQuery", eg, window, document], function($, ns, glob
 			this._refreshViewport();
 			if (this.el.children.length > 0) {
 				this.items = this._itemize([].slice.apply(this.el.children), this.options.defaultGroupKey, true);
-				this.layout();
+				this.layout(this.items, true);
 			}
 
 			this._onScroll = $.proxy(this._onScroll, this);
@@ -180,7 +180,7 @@ eg.module("infiniteGrid", ["jQuery", eg, window, document], function($, ns, glob
 			var self = this;
 			this._resizeTimeout = setTimeout(function() {
 				self._refreshViewport();
-				self.layout();
+				self.layout(self.items, true);
 				self._resizeTimeout = null;
 			}, 100);
 		},
@@ -288,8 +288,9 @@ eg.module("infiniteGrid", ["jQuery", eg, window, document], function($, ns, glob
 				return v;
 			}, this).forEach(function(v) {
 				if (v.el) {
-					v.el.style.left = v.position.x + "px";
-					v.el.style.top = v.position.y + "px";
+					var style = v.el.style;
+					style.left = v.position.x + "px";
+					style.top = v.position.y + "px";
 				}
 			});
 		},
@@ -460,6 +461,11 @@ eg.module("infiniteGrid", ["jQuery", eg, window, document], function($, ns, glob
 			}
 			var elements = $elements.toArray();
 			var $cloneElements = $(elements);
+			var dummy = -this._clientHeight + "px";
+			elements.map(function(v) {
+				v.style.position = "absolute";
+				v.style.top = dummy;
+			});
 			var items = this._itemize(elements, groupKey, isAppend);
 			if (isAppend) {
 				this.items = this.items.concat(items);
@@ -478,7 +484,12 @@ eg.module("infiniteGrid", ["jQuery", eg, window, document], function($, ns, glob
 			var self = this;
 			var callback = function() {
 				if (self._isProcessing) {
-					(isRefresh || !self._appendCols.length) && self._measureColumns();
+					if (isRefresh || !self._appendCols.length) {
+						items.forEach(function(v) {
+							v.el.style.position = "absolute";
+						});
+						self._measureColumns();
+					}
 					self._layoutItems(items);
 					self._postLayout(items);
 				}
@@ -705,10 +716,7 @@ eg.module("infiniteGrid", ["jQuery", eg, window, document], function($, ns, glob
 			return colItems;
 		},
 		_itemize: function(elements, groupKey, isAppend) {
-			var dummyTop = -this._clientHeight + "px";
 			return elements.map(function(v) {
-				v.style.top = dummyTop;
-				v.style.position = "absolute";
 				return {
 					el: v,
 					position: {
@@ -729,10 +737,10 @@ eg.module("infiniteGrid", ["jQuery", eg, window, document], function($, ns, glob
 				width: $el.innerWidth(),
 				height: $el.innerHeight()
 			};
-			var shortColIndex;
 			var isAppend = item.isAppend;
 			var cols = isAppend ? this._appendCols : this._prependCols;
 			var y = Math[isAppend ? "min" : "max"].apply(Math, cols);
+			var shortColIndex;
 			if (isAppend) {
 				shortColIndex = cols.indexOf(y);
 			} else {

diff --git a/test/manual/infiniteGird_demo.html b/test/manual/infiniteGird_demo.html
@@ -75,9 +75,9 @@ <h2>InfiniteGrid Demo</h2>
 var template = Handlebars.compile($("#items-template").html());
 var data = {
 	getItems: function(groupNo) {
-		groupNo *= 1000;
+		groupNo *= 30;
 		var items = [];
-		for(var i=0; i<1000; i++) {
+		for(var i=0; i<30; i++) {
 			items.push(groupNo + i);
 		}
 		items = $.map(items, function(v) {
@@ -100,19 +100,19 @@ <h2>InfiniteGrid Demo</h2>
 		defaultGroupKey : 0
 	})
 	.on({
-	// 	"append" : function(e) {
-	// 		var gk = this.getGroupKeys();
-	// 		var lastGk = gk[gk.length-1];
-	// 		lastGk++;
-	// 		ig.append(template(data.getItems(lastGk)), lastGk);
-	// 	},
-	// 	"prepend" : function(e) {
-	// 		var firstGk = this.getGroupKeys()[0];
-	// 		firstGk--;
-	// 		if(firstGk >= 0) {
-	// 			ig.prepend(template(data.getItems(firstGk)), firstGk);
-	// 		}
-	// 	},
+		"append" : function(e) {
+			var gk = this.getGroupKeys();
+			var lastGk = gk[gk.length-1];
+			lastGk++;
+			ig.append(template(data.getItems(lastGk)), lastGk);
+		},
+		"prepend" : function(e) {
+			var firstGk = this.getGroupKeys()[0];
+			firstGk--;
+			if(firstGk >= 0) {
+				ig.prepend(template(data.getItems(firstGk)), firstGk);
+			}
+		},
 		"layoutComplete" : function(e) {
 			$grid.css("opacity", 1);
 		}