From 922b44a775ec5fa5c50a4af6dbd5d666d466002f Mon Sep 17 00:00:00 2001 From: sculove Date: Mon, 1 Aug 2016 14:49:55 +0900 Subject: [PATCH] refactor(infiniteGrid): enhance performance about initialization ref #325 --- src/infiniteGrid.js | 30 +++++------- test/manual/infiniteGird_demo.html | 76 +++++++++++++++--------------- 2 files changed, 52 insertions(+), 54 deletions(-) diff --git a/src/infiniteGrid.js b/src/infiniteGrid.js index 43f07fa..1b09ab3 100644 --- a/src/infiniteGrid.js +++ b/src/infiniteGrid.js @@ -84,6 +84,7 @@ eg.module("infiniteGrid", ["jQuery", eg, window, document], function($, ns, glob this.el.style.position = "relative"; this._prefix = _prefix || ""; this._isIos = /iPhone|iPad/.test(global.navigator.userAgent); + this._isIE10lower = !!(doc.documentMode && doc.documentMode < 10); this._appendCols = this._prependCols = []; this.$view = $(global); this._reset(); @@ -287,12 +288,13 @@ eg.module("infiniteGrid", ["jQuery", eg, window, document], function($, ns, glob _layoutItems: function(items) { items.map(function(v) { v.position = this._getItemLayoutPosition(v); + 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"; } - return v; - }, this); + }); }, /** * Append elements @@ -475,7 +477,7 @@ eg.module("infiniteGrid", ["jQuery", eg, window, document], function($, ns, glob this.layout(items, false); }, _waitResource: function(items, isRefresh) { - var needCheck = this._checkImageLoaded(items); + var needCheck = this._checkImageLoaded(); var self = this; var callback = function() { if (self._isProcessing) { @@ -598,19 +600,12 @@ eg.module("infiniteGrid", ["jQuery", eg, window, document], function($, ns, glob this._resetCols(this._appendCols.length || 0); this.items = []; }, - _checkImageLoaded: function(items) { - var needCheck = []; - items.forEach(function(v) { - if (v.el.nodeName === "IMG") { - !v.el.complete && needCheck.push(v); - } else if (v.el.nodeType && - ([1,9,11].indexOf(v.el.nodeType) !== -1)) { // ELEMENT_NODE, DOCUMENT_NODE, DOCUMENT_FRAGMENT_NODE - needCheck = needCheck.concat($(v.el).find("img").filter(function(fk, fv) { - return !fv.complete; - }).toArray()); + _checkImageLoaded: function() { + return this.$el.find("img").filter(function(k, v) { + if (v.nodeType && ([1,9,11].indexOf(v.nodeType) !== -1)) { + return !v.complete; } - }); - return needCheck; + }).toArray(); }, _waitImageLoaded: function(needCheck, callback) { var checkCount = needCheck.length; @@ -622,8 +617,9 @@ eg.module("infiniteGrid", ["jQuery", eg, window, document], function($, ns, glob var $el; needCheck.forEach(function(v) { $el = $(v); - $el.attr("src", $el.attr("src")).on("load error", onCheck); - }); + this._isIE10lower && $el.attr("src", $el.attr("src")); + $el.on("load error", onCheck); + }, this); }, _measureColumns: function() { this.el.style.width = null; diff --git a/test/manual/infiniteGird_demo.html b/test/manual/infiniteGird_demo.html index c76cbac..c7c571d 100644 --- a/test/manual/infiniteGird_demo.html +++ b/test/manual/infiniteGird_demo.html @@ -15,6 +15,7 @@ + @@ -74,9 +75,9 @@

InfiniteGrid Demo

var template = Handlebars.compile($("#items-template").html()); var data = { getItems: function(groupNo) { - groupNo *= 30; + groupNo *= 1000; var items = []; - for(var i=0; i<30; i++) { + for(var i=0; i<1000; i++) { items.push(groupNo + i); } items = $.map(items, function(v) { @@ -92,51 +93,52 @@

InfiniteGrid Demo

}; $(function() { var $grid = $("#grid"); - // $grid.append(template(data.getItems(0))); + $grid.append(template(data.getItems(0))); var ig = new eg.InfiniteGrid("#grid", { count : 60, 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); - } - }, + }) + .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); + // } + // }, "layoutComplete" : function(e) { $grid.css("opacity", 1); } }); // for persist logic - if($.persist.isNeeded()) { - if ("scrollRestoration" in history) { - history.scrollRestoration = "manual"; - } - $grid.on("click", "a", function(e) { - $.persist("GRID_PERSIST", { - "scrollPos": $(document).scrollTop(), - "grid": ig.getStatus() - }); - }); - var persistData = $.persist("GRID_PERSIST"); - if($.isEmptyObject(persistData)) { - ig.append(template(data.getItems(0)), 0); - } else { - ig.setStatus(persistData.grid); - window.scrollTo(0, persistData.scrollPos); - } - } else { - ig.append(template(data.getItems(0)), 0); - } + // if($.persist.isNeeded()) { + // if ("scrollRestoration" in history) { + // history.scrollRestoration = "manual"; + // } + // $grid.on("click", "a", function(e) { + // $.persist("GRID_PERSIST", { + // "scrollPos": $(document).scrollTop(), + // "grid": ig.getStatus() + // }); + // }); + // var persistData = $.persist("GRID_PERSIST"); + // if($.isEmptyObject(persistData)) { + // ig.append(template(data.getItems(0)), 0); + // } else { + // ig.setStatus(persistData.grid); + // window.scrollTo(0, persistData.scrollPos); + // } + // } else { + // ig.append(template(data.getItems(0)), 0); + // } });