This repository has been archived by the owner on Jul 10, 2019. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 26
/
index.html
124 lines (101 loc) · 6.19 KB
/
index.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
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<title>Lazy load images without jQuery. by kaizau</title>
<meta name="description" content="A framework-free plugin for lazy loading images with JS.">
<link rel="stylesheet" href="gh-page/styles.css">
<link rel="stylesheet" href="gh-page/pygment_trac.css">
<!-- Uncomment for IE7 testing
<link rel="stylesheet" href="gh-page/fauxconsole.css">
-->
<style>
.lazy-load, .lazy-loaded {
-webkit-transition: opacity 0.3s;
-moz-transition: opacity 0.3s;
-ms-transition: opacity 0.3s;
-o-transition: opacity 0.3s;
transition: opacity 0.3s;
opacity: 0;
}
.lazy-loaded { opacity: 1; }
.demo img { display: block; margin: 300px 0; }
</style>
<!--[if lt IE 9]>
<script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7/html5shiv.js"></script>
<![endif]-->
</head>
<body>
<div class="wrapper">
<header>
<h1>Lazy load images without jQuery.</h1>
<p>A totally lame name for a totally useful script.</p>
<p class="view"><a href="https://github.com/kaizau/Lazy-Load-Images-without-jQuery">View the Project on GitHub <small>kaizau/Lazy-Load-Images-without-jQuery</small></a></p>
<ul>
<li><a href="https://raw.github.com/kaizau/Lazy-Load-Images-without-jQuery/gh-pages/javascripts/lazyload.js">Download <strong>Expanded</strong></a></li>
<li><a href="https://raw.github.com/kaizau/Lazy-Load-Images-without-jQuery/gh-pages/javascripts/lazyload.min.js">Download <strong>Minified</strong></a></li>
<li><a href="https://github.com/kaizau/Lazy-Load-Images-without-jQuery">View On <strong>GitHub</strong></a></li>
</ul>
</header>
<section>
<h2>About</h2>
<p>Lazy load your images without the overhead of a framework. Optionally, send mobile-optimized images to smaller screens. Tested on IE7+, Firefox, Chrome, iOS.</p>
<p>Based on code from <a href="http://www.mikepulaski.com/code/2012/06/29/lazy-load-images-without-external-libraries/">Mike Pulaski</a>.</p>
<h2>Usage</h2>
<ol>
<li><p>Include <code>lazyload.min.js</code> or inline it.</p></li>
<li>
<p>Add <code>.lazy-load</code> and <code>data-src</code> to each of your <code><img></code> tags. Optionally add <code>data-src-mobile</code>, a placeholder src, and a fallback image.</p>
<div class="highlight">
<pre><span class="nt"><img</span> <span class="na">class=</span><span class="s">"lazy-load"</span> <span class="na">data-src=</span><span class="s">"lazy.jpg"</span> <span class="na">data-src-mobile=</span><span class="s">"lazy-small.jpg"</span> <span class="na">src=</span><span class="s">"blank.gif"</span> <span class="nt">/></span>
<span class="nt"><noscript><img</span> <span class="na">src=</span><span class="s">"lazy.jpg"</span> <span class="nt">/></noscript></span>
</pre>
</div>
</li>
<li>
<p>Add CSS3 for an animated fade-in.</p>
<div class="highlight">
<pre><span class="nc">.lazy-load</span><span class="o">,</span> <span class="nc">.lazy-loaded</span> <span class="p">{</span>
<span class="o">-</span><span class="n">webkit</span><span class="o">-</span><span class="n">transition</span><span class="o">:</span> <span class="k">opacity</span> <span class="m">0.3s</span><span class="p">;</span>
<span class="o">-</span><span class="n">moz</span><span class="o">-</span><span class="n">transition</span><span class="o">:</span> <span class="k">opacity</span> <span class="m">0.3s</span><span class="p">;</span>
<span class="o">-</span><span class="n">ms</span><span class="o">-</span><span class="n">transition</span><span class="o">:</span> <span class="k">opacity</span> <span class="m">0.3s</span><span class="p">;</span>
<span class="o">-</span><span class="n">o</span><span class="o">-</span><span class="n">transition</span><span class="o">:</span> <span class="k">opacity</span> <span class="m">0.3s</span><span class="p">;</span>
<span class="n">transition</span><span class="o">:</span> <span class="k">opacity</span> <span class="m">0.3s</span><span class="p">;</span>
<span class="k">opacity</span><span class="o">:</span> <span class="m">0</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.lazy-loaded</span> <span class="p">{</span> <span class="k">opacity</span><span class="o">:</span> <span class="m">1</span><span class="p">;</span> <span class="p">}</span>
</pre>
</div>
</li>
</ol>
<div class="demo">
<h2>Demo</h2>
<p>Open up your Developer Tools / Firebug to peek at the network.</p>
<p>On mobile, image order will be swapped (different images used).</p>
<p>Images courtesy of <a href="http://grin.hq.nasa.gov/index.html">NASA</a>.</p>
<img class="lazy-load" data-src="demo/1.jpg" data-src-mobile="demo/mobile/1.jpg" src="demo/blank.gif" />
<noscript><img src="demo/1.jpg" /></noscript>
<img class="lazy-load" data-src="demo/2.jpg" data-src-mobile="demo/mobile/2.jpg" src="demo/blank.gif" />
<noscript><img src="demo/2.jpg" /></noscript>
<img class="lazy-load" data-src="demo/3.jpg" data-src-mobile="demo/mobile/3.jpg" src="demo/blank.gif" />
<noscript><img src="demo/3.jpg" /></noscript>
<img class="lazy-load" data-src="demo/4.jpg" data-src-mobile="demo/mobile/4.jpg" src="demo/blank.gif" />
<noscript><img src="demo/4.jpg" /></noscript>
<img class="lazy-load" data-src="demo/5.jpg" data-src-mobile="demo/mobile/5.jpg" src="demo/blank.gif" />
<noscript><img src="demo/5.jpg" /></noscript>
</div>
</section>
<footer>
<p>Maintained by <a href="http://kaizau.com/">Kai Zau</a> [<a href="https://github.com/kaizau">github</a>, <a href="http://twitter.com/kaizau">twitter</a>].</p>
<p><small>Hosted on GitHub Pages — Theme by <a href="https://github.com/orderedlist">orderedlist</a></small></p>
</footer>
</div>
<!-- Uncomment for IE7 testing
<script src="gh-page/fauxconsole.js"></script>
-->
<script src="gh-page/scale.fix.js"></script>
<script src="javascripts/lazyload.js"></script>
</body>
</html>