21 lines
3.2 KiB
HTML
21 lines
3.2 KiB
HTML
|
<h1 id="Lazy-Load-Plugin-for-jQuery"><a href="#Lazy-Load-Plugin-for-jQuery" class="headerlink" title="Lazy Load Plugin for jQuery"></a>Lazy Load Plugin for jQuery</h1><p>Lazy Load delays loading of images in long web pages. Images outside of viewport wont be loaded before user scrolls to them. This is opposite of image preloading.</p>
|
|||
|
|
<p>Using Lazy Load on long web pages containing many large images makes the page load faster. Browser will be in ready state after loading visible images. In some cases it can also help to reduce server load.</p>
|
|||
|
|
<p>Lazy Load is inspired by <a href="http://developer.yahoo.com/yui/imageloader/">YUI ImageLoader</a> Utility by Matt Mlinac.</p>
|
|||
|
|
<h2 id="How-to-Use"><a href="#How-to-Use" class="headerlink" title="How to Use?"></a>How to Use?</h2><p>Lazy Load depends on jQuery. Include them both in end of your HTML code:</p>
|
|||
|
|
<pre><code class="html"><span class="tag"><<span class="name">script</span> <span class="attr">src</span>=<span class="string">"jquery.js"</span> <span class="attr">type</span>=<span class="string">"text/javascript"</span>></span><span class="undefined"></span><span class="tag"></<span class="name">script</span>></span>
|
|||
|
|
<span class="tag"><<span class="name">script</span> <span class="attr">src</span>=<span class="string">"jquery.lazyload.js"</span> <span class="attr">type</span>=<span class="string">"text/javascript"</span>></span><span class="undefined"></span><span class="tag"></<span class="name">script</span>></span>
|
|||
|
|
</code></pre>
|
|||
|
|
<p>You must alter your HTML code. URL of the real image must be put into data-original attribute. It is good idea to give Lazy Loaded image a specific class. This way you can easily control which images plugin is binded to. Note that you should have width and height attributes in your image tag.</p>
|
|||
|
|
<pre><code class="html"><span class="tag"><<span class="name">img</span> <span class="attr">class</span>=<span class="string">"lazy"</span> <span class="attr">data-original</span>=<span class="string">"img/example.jpg"</span> <span class="attr">width</span>=<span class="string">"640"</span> <span class="attr">height</span>=<span class="string">"480"</span>></span>
|
|||
|
|
</code></pre>
|
|||
|
|
<p>then in your code do:</p>
|
|||
|
|
<pre><code class="js">$(<span class="string">"img.lazy"</span>).lazyload();
|
|||
|
|
</code></pre>
|
|||
|
|
<p>This causes all images of class lazy to be lazy loaded.</p>
|
|||
|
|
<p>More information on <a href="http://www.appelsiini.net/projects/lazyload">Lazy Load</a> project page.</p>
|
|||
|
|
<h2 id="Install"><a href="#Install" class="headerlink" title="Install"></a>Install</h2><p>You can install with <a href="http://bower.io/">bower</a> or <a href="https://www.npmjs.com/">npm</a>.</p>
|
|||
|
|
<pre><code class="sh">$ bower install jquery.lazyload
|
|||
|
|
$ npm install jquery-lazyload
|
|||
|
|
</code></pre>
|
|||
|
|
<h1 id="License"><a href="#License" class="headerlink" title="License"></a>License</h1><p>All code licensed under the <a href="http://www.opensource.org/licenses/mit-license.php">MIT License</a>. All images licensed under <a href="http://creativecommons.org/licenses/by/3.0/deed.en_US">Creative Commons Attribution 3.0 Unported License</a>. In other words you are basically free to do whatever you want. Just don’t remove my name from the source.</p>
|