Skip to content

Commit 68efe88

Browse files
enbifaenbifa
committed
1 parent ec37585 commit 68efe88

File tree

1 file changed

+72
-70
lines changed

1 file changed

+72
-70
lines changed

‎README.md‎

Lines changed: 72 additions & 70 deletions
Original file line numberDiff line numberDiff line change
@@ -5,11 +5,12 @@
55
66
## Contents
77
- [Browser Support](#browser-Support)
8+
- [When using lo scheletrone](#when-using-lo-scheletrone)
89
- [Getting started](#getting-started)
910
- [Installation](#installation)
1011
- [Usage](#usage)
1112
- [Options](#options)
12-
- [When using lo scheletrone](#when-using-lo-scheletrone)
13+
1314

1415
### Browser Support
1516

@@ -20,6 +21,76 @@ We do care about it.
2021
IE 8+ ✔ | Latest ✔ | Latest ✔ | Latest ✔ | Latest ✔ |
2122

2223

24+
### When using lo scheletrone
25+
26+
There are several cases where it is useful to use this plugin. The first is when you have a div populated asynchronous and the data waiting is very slow. The effect you have is an empty block awaiting the data like this.
27+
28+
<p><img src="withoutdata.gif" alt="skeleton gif" style="max-width:100%;"></p>
29+
30+
31+
in this case you can use this code:
32+
33+
```javascript
34+
var instance = $('#myDIV').scheletrone({
35+
incache: true,
36+
onComplete: function() {
37+
//here you can insert the code to populate the div
38+
39+
}
40+
});
41+
```
42+
43+
The important thing to do is to include an attribute "data-scheletrone" on the items to be cached like this:
44+
45+
```html
46+
<div class="container2" data-scheletrone="true">
47+
<img class="avatar" src="http://lorempicsum.com/up/255/200/2">
48+
<div class="content">
49+
<h1 class="firstName">
50+
<span>Up</span>
51+
</h1>
52+
<div class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In consectetur metus in nibh porttitor ultricies. Vestibulum placerat blandit interdum.
53+
</div>
54+
</div>
55+
</div>
56+
```
57+
58+
If you are creating a new page and want to give the skeleton screen effects, you have just create the template on the page and leave the work dirty to the Scheletrone.
59+
60+
```html
61+
<div class="container" id="myDIV">
62+
<img class="avatar" src="http://lorempicsum.com/up/255/200/2">
63+
<div class="content">
64+
<h1 class="firstName">
65+
<span>Up</span>
66+
</h1>
67+
<div class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In consectetur metus in nibh porttitor ultricies. Vestibulum placerat blandit interdum.
68+
</div>
69+
</div>
70+
</div>
71+
```
72+
and
73+
74+
```javascript
75+
var instance = $('#myDIV').scheletrone({
76+
url : 'http://url/to/file',
77+
ajaxData : {},
78+
});
79+
```
80+
81+
if you want to manipulate the data received via ajax or simply make the call use the onComplete callback function.
82+
83+
```javascript
84+
var instance = $('#myDIV').scheletrone({
85+
incache: true,
86+
onComplete: function() {
87+
//here you can insert the code to populate the div
88+
89+
}
90+
});
91+
```
92+
93+
2394
### Getting started
2495

2596
See jquery.skeleton.loader plugin in action [DEMO](https://rawgit.com/enbifa/jquery.skeleton.loader/master/example/index.html):
@@ -230,72 +301,3 @@ var instance = $('#myDIV').scheletrone({
230301
}
231302
});
232303
```
233-
234-
### When using lo scheletrone
235-
236-
There are several cases where it is useful to use this plugin. The first is when you have a div populated asynchronous and the data waiting is very slow. The effect you have is an empty block awaiting the data like this.
237-
238-
<p><img src="withoutdata.gif" alt="skeleton gif" style="max-width:100%;"></p>
239-
240-
241-
in this case you can use this code:
242-
243-
```javascript
244-
var instance = $('#myDIV').scheletrone({
245-
incache: true,
246-
onComplete: function() {
247-
//here you can insert the code to populate the div
248-
249-
}
250-
});
251-
```
252-
253-
The important thing to do is to include an attribute "data-scheletrone" on the items to be cached like this:
254-
255-
```html
256-
<div class="container2" data-scheletrone="true">
257-
<img class="avatar" src="http://lorempicsum.com/up/255/200/2">
258-
<div class="content">
259-
<h1 class="firstName">
260-
<span>Up</span>
261-
</h1>
262-
<div class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In consectetur metus in nibh porttitor ultricies. Vestibulum placerat blandit interdum.
263-
</div>
264-
</div>
265-
</div>
266-
```
267-
268-
If you are creating a new page and want to give the skeleton screen effects, you have just create the template on the page and leave the work dirty to the Scheletrone.
269-
270-
```html
271-
<div class="container" id="myDIV">
272-
<img class="avatar" src="http://lorempicsum.com/up/255/200/2">
273-
<div class="content">
274-
<h1 class="firstName">
275-
<span>Up</span>
276-
</h1>
277-
<div class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In consectetur metus in nibh porttitor ultricies. Vestibulum placerat blandit interdum.
278-
</div>
279-
</div>
280-
</div>
281-
```
282-
and
283-
284-
```javascript
285-
var instance = $('#myDIV').scheletrone({
286-
url : 'http://url/to/file',
287-
ajaxData : {},
288-
});
289-
```
290-
291-
if you want to manipulate the data received via ajax or simply make the call use the onComplete callback function.
292-
293-
```javascript
294-
var instance = $('#myDIV').scheletrone({
295-
incache: true,
296-
onComplete: function() {
297-
//here you can insert the code to populate the div
298-
299-
}
300-
});
301-
```

0 commit comments

Comments
 (0)