This repository was archived by the owner on Jan 3, 2020. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 12
/
Copy pathexample.html
68 lines (62 loc) · 2.73 KB
/
example.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
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript" src="jquery.krioImageLoader-min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#test").krioImageLoader();
});
</script>
<style type="text/css">
body {
background: #D6D6D6;
}
img {
background: white;
border: 1px solid #C8C8C8;
padding: 9px;
width: 200px;
height: 200px;
display: inline;
margin: 20px;
}
#test {
width: 960px;
margin: 0 auto;
}
p {
float: left;
width: 320px;
margin: 40px;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
</head>
<body>
<div id="test">
<p>Images are hidden from view until they have been fully downloaded. Once the download is complete, they are faded
in.
This helps to improve the appearance of a page by removing the typical ugliness associated with loading images
by the pixel. The script
in no way alters the appearance of the page. It only changes how the images come into view.</p>
<img src="http://farm6.static.flickr.com/5085/5256198167_9446fc5835_o.jpg"/>
<img src="http://farm6.static.flickr.com/5205/5256785062_bf869c526c_z.jpg"/>
<img src="http://farm4.static.flickr.com/3014/2707892283_9660383182_o.jpg"/>
<p>Simply create a wrapper around the images you want to fade, such as a div with an ID. Then call
$("#test").krioImageLoader(); where #test is
the ID of the wrapper.</p>
<img src="http://farm6.static.flickr.com/5283/5256073639_165a7327c6_b.jpg"/>
<img src="http://farm6.static.flickr.com/5045/5256371974_e78c05e78e_z.jpg"/>
<img src="http://farm6.static.flickr.com/5287/5256667690_e7e47d4b9c_b.jpg"/>
<p>A JavaScript timer checks the image object to check and see if it has been completely downloaded. Once it has
been, it is faded in.
You can the time between timer checks through the options.</p>
<img src="http://farm2.static.flickr.com/1101/538158332_596d399b3e_o.jpg"/>
<img src="http://farm6.static.flickr.com/5286/5256011535_1675917428_z.jpg"/>
<img src="http://farm5.static.flickr.com/4129/5001903546_8556e3e4b7_b.jpg"/>
<p>Photos by <a href="http://www.flickr.com/photos/tinkerroll21/" target="_blank">downing.amanda</a></p>
</div>
</body>
</html>