├── .gitignore ├── CHANGES.txt ├── test ├── index.html └── basic.html ├── index.html ├── bower.json ├── demo ├── tiles │ ├── index.html │ ├── squares-page.html │ └── circles-page.html ├── index.html └── declarative │ └── index.html ├── README.md └── lazy-pages.html /.gitignore: -------------------------------------------------------------------------------- 1 | bower_components 2 | -------------------------------------------------------------------------------- /CHANGES.txt: -------------------------------------------------------------------------------- 1 | 0.8.6 2 | ============== 3 | 4 | 0.8.5 5 | ============== 6 | - Removed on-demand element definition loading inside template. It did not work in IE. 7 | 8 | 0.8.4 9 | ============== 10 | - added `lazy-pages-transition-ready` event if you need to interact with page before it is shown 11 | - debounce rescueSelection to prevent infinite loops 12 | - timeout transition.startAnimation from dom-change, makes animations better for lazily loaded 13 | 14 | 0.8.3 15 | ============== 16 | - bugfix: attrForSelected was not working 17 | - iron-pages compatibility: added selectedItem 18 | - feature: rescueSelection: selection to use if last one was bad 19 | 20 | 0.8.2 21 | ============== 22 | - fix for http://stackoverflow.com/questions/32639639/ios-9-mobile-safari-has-a-blinking-bug-with-transform-scale3d-and-translate3d 23 | ios animation janky 24 | -------------------------------------------------------------------------------- /test/index.html: -------------------------------------------------------------------------------- 1 | 2 | 11 | 12 | 13 | 14 | 15 | 16 | Tests 17 | 18 | 19 | 20 | 21 | 22 | 29 | 30 | 31 | 32 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 11 | 12 | 13 | 14 | lazy-pages 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "lazy-pages", 3 | "version": "0.8.6", 4 | "license": "MIT", 5 | "description": "Lazy display/loading of Polymer pages: iron/neon-page compatible", 6 | "main": "lazy-pages.html", 7 | "authors": [ 8 | "Aleks Totic " 9 | ], 10 | "repository": { 11 | "type": "git", 12 | "url": "https://github.com/atotic/lazy-pages.git" 13 | }, 14 | "keywords": [ 15 | "web-components", 16 | "polymer", 17 | "container" 18 | ], 19 | "ignore": [ 20 | "test" 21 | ], 22 | "dependencies": { 23 | "iron-resizable-behavior": "PolymerElements/iron-resizable-behavior#^1.0.0", 24 | "neon-animation": "PolymerElements/neon-animation#^1.0.0", 25 | "polymer": "Polymer/polymer#^1.0.0" 26 | }, 27 | "devDependencies": { 28 | "iron-component-page": "polymerelements/iron-component-page#^1.0.0", 29 | "test-fixture": "polymerelements/test-fixture#^1.0.0", 30 | "web-component-tester": "*", 31 | "webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0", 32 | "google-map": "^1.1.2" 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /demo/tiles/index.html: -------------------------------------------------------------------------------- 1 | 2 | 10 | 11 | 12 | lazy-pages demo: tiles 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 35 | 36 | 44 | 45 | 46 | 47 | 48 | 63 | 64 | 77 | 78 | 79 | 80 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # lazy-pages 2 | ##### when you do not want all your pages to get out of bed at once 3 | 4 | Status: beta 5 | 6 | Instead of your app 7 | ```html 8 | 9 | 10 | 11 | 12 | 13 | ``` 14 | loading every page into DOM on startup, use `lazy-pages` to load them on demand: 15 | ```html 16 | 17 | 18 | 19 | 20 | 24 | 25 | 29 | 30 | 31 | 32 | ``` 33 | 34 | ### Why? 35 | - memory: you have lots of pages, and do not want to load them all at once on startup 36 | - speed: you do not want to load all your element definitions on startup 37 | - attached callbacks: you do not want all your attached callbacks to run on an initial load 38 | 39 | ### Usage 40 | 41 | `lazy-pages` will render just like `neon-animated-pages`. You can also use them as `iron-pages` replacement. 42 | 43 | Put any template you'd like to load lazily inside a `dom-if` template: 44 | 45 | ```html 46 | 49 | ``` 50 | 51 | You can only have a single top-level tag inside a template (except for link tags). This keeps my code simple. 52 | 53 | To remove element from dom when invisible, use `restamp` dom-if option. 54 | 55 | `lazy-pages` has basic attribute compatibility with neon-animated-pages: `selected`, `attrForSelected`, `animateInitialSelection`, `items`, `selectedItem`. 56 | 57 | ### Not working 58 | 59 | It'd be nice to also load element definitions lazily. My initial hack was 60 | to allow <link> elements inside dom-if templates. It worked everywhere but IE. 61 | I think it can be made to work, but I am not sure if this is the right way to do it. 62 | Another idea was to have a map of {unresolved-tag-name -> import link}, traverse templates 63 | for any unresolved elements, and importHref definitions when elements are shown. 64 | 65 | This is how it used to work: 66 | ```html 67 | 68 | 73 | ``` 74 | 75 | -------------------------------------------------------------------------------- /demo/tiles/squares-page.html: -------------------------------------------------------------------------------- 1 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 36 | 37 | 49 | 50 | 51 | 52 | 105 | -------------------------------------------------------------------------------- /demo/tiles/circles-page.html: -------------------------------------------------------------------------------- 1 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 33 | 34 | 44 | 45 | 46 | 47 | 111 | -------------------------------------------------------------------------------- /demo/index.html: -------------------------------------------------------------------------------- 1 | 2 | 11 | 12 | 13 | 14 | 15 | lazy-pages demo 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 56 | 57 | 58 | 59 | 96 | 97 | 106 | 107 | 108 | 109 | -------------------------------------------------------------------------------- /test/basic.html: -------------------------------------------------------------------------------- 1 | 2 | 11 | 12 | 13 | 14 | 15 | iron-pages-basic 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 40 | 41 | 42 | 43 | 51 | 52 | 53 | 113 | 114 | 115 | 116 | -------------------------------------------------------------------------------- /demo/declarative/index.html: -------------------------------------------------------------------------------- 1 | 2 | 10 | 11 | 12 | lazy-pages demo: declarative 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 37 | 38 | 73 | 74 | 75 | 76 | 77 | 109 | 110 | 128 | 129 | 130 | 131 | -------------------------------------------------------------------------------- /lazy-pages.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 36 | 37 | 38 | 578 | --------------------------------------------------------------------------------