forked from tuupola/lazyload
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathenabled_timeout.html
99 lines (86 loc) · 3.33 KB
/
enabled_timeout.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
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Lazy Load Images After 5 Second Timeout</title>
<meta name="generator" content="Mephisto" />
<link href="http://www.appelsiini.net/stylesheets/main2.css" rel="stylesheet" type="text/css" />
<link rel="alternate" type="application/atom+xml" href="http://feeds.feedburner.com/tuupola" title="Atom feed" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="jquery.lazyload.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
$(function() {
$("img:below-the-fold").lazyload({
placeholder : "img/grey.gif",
event : "sporty"
});
});
$(window).bind('load', function() {
var timeout = setTimeout(function() { $("img").trigger("sporty") }, 5000);
});
</script>
<script src="/mint/?js" type="text/javascript"></script>
<style type="text/css">
#sidebar {
width: 0px;
}
#content {
width: 770px;
}
</style>
</head>
<body>
<div id="wrap">
<div id="header">
<p>
<h1>Lazy Load</h1><br />
<small>Image lazy loader plugin for jQuery.</small>
<ul id="nav">
<li id="first"><a href="/" class="active">weblog</a></li>
<li><a href="/projects" class="last">projects</a></li>
<!--
<li><a href="/cv" class="last">cv</a></li>
-->
</ul>
</p>
</div>
<div id="content">
<h2>Plugin enabled</h2>
<div class="entry">
<p>
Here <a href="http://www.appelsiini.net/projects/lazyload">Lazy Load</a>
plugin is enabled. Images below the fold (the ones lower than window bottom) are not
loaded. Timeout will trigger five seconds after all elements of page have been loaded.
Scroll down the page and wait to see.
</p>
<code>
<pre>
$(function() {
$("img:below-the-fold").lazyload({
placeholder : "img/grey.gif",
event : "sporty"
});
});
$(window).bind('load', function() {
var timeout = setTimeout(function() { $("img").trigger("sporty") }, 5000);
});
</pre>
</code>
<img src="img/bmw_m1_hood.jpg?<?php print time() ?>" width="765" height="574" alt="BMW M1 Hood"><br/>
<img src="img/bmw_m1_side.jpg?<?php print time() ?>" width="765" height="574" alt="BMW M1 Side"><br/>
<img src="img/viper_1.jpg?<?php print time() ?>" width="765" height="574" alt="Viper 1"><br/>
<img src="img/viper_corner.jpg?<?php print time() ?>" width="765" height="574" alt="Viper Corner"><br/>
<img src="img/bmw_m3_gt.jpg?<?php print time() ?>" width="765" height="574" alt="BMW M3 GT"><br/>
<img src="img/corvette_pitstop.jpg?<?php print time() ?>" width="765" height="574" alt="Corvette Pitstop"><br/>
</div>
<div id="sidebar">
</div>
<div id="footer">
</div>
<script src="http://www.google-analytics.com/urchin.js" type="text/javascript"></script>
<script type="text/javascript">
_uacct = "UA-190966-1";
urchinTracker();
</script>
</body>
</html>