-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathoffscreenplaceholder.html
41 lines (36 loc) · 2.18 KB
/
offscreenplaceholder.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>OffscreenPlaceholder - Virtual scrolling for AngularJs</title>
<link rel="stylesheet" href="styles/main.css">
<link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
<link rel="icon" type="image/png" href="favicon.ico">
</head>
<body data-ng-app="app">
<!-- Menu -->
<div class="menu">
<a href="https://github.com/tsimeunovic/OffscreenPlaceholder">
<img src="https://assets-cdn.github.com/images/modules/logos_page/Octocat.png"/>
</a>
<h1>OffscreenPlaceholder demo</h1>
</div>
<!-- Title -->
<h1>OffscreenPlaceholder demo</h1>
<div class="description">
<p>OffscreenPlaceholder is AngularJs module for virtual scrolling. It only renders elements that are visible on screen and that way creates less watches and DOM elements. You no longer have to think about how many elements you can bind as thousands of them can work as smooth as dozen of them. Biggest advantages over other solutions are that elements can have different height and you don't have to place them in common parent with scrollbar. Read more on how to use and configure it on project <a href="https://github.com/tsimeunovic/OffscreenPlaceholder">GitHub</a> page.</p>
<p>Bellow example shows list of mock personal data containing 2000 elements. Each element is displayed inside custom template. As item is displayed it loads image from external source. Default options with immediate redraw and global placeholder are used. Only top and bottom boundaries are extended to 200px and 800px to achieve smoother scrolling.</p>
</div>
<!-- Main view -->
<div data-ng-view></div>
<!-- Data -->
<script src="scripts/data.js"></script>
<!-- Libraries -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular-route.min.js"></script>
<script src="https://cdn.rawgit.com/tsimeunovic/OffscreenPlaceholder/bafe90da025f33ac7b566c87e3ceb9b818555a52/offscreenPlaceholder.min.js"></script>
<!-- Page scripts -->
<script src="scripts/app.js"></script>
<script src="scripts/header.js"></script>
</body>
</html>