Improve Page Load Time With jQuery Lazy Scroll Loading Plugin

Improve Page Load Time With jQuery Lazy Scroll Loading Plugin
File Size: 14.4 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Lazy Scroll Loading is a simple yet useful jQuery plugin that makes your site load faster and saves bandwidth. Uses jQuery Lazy Scroll Loading Plugin to only load html element (image, text, div, etc...) when it's visible in the viewport. Enables you to improve page load times and increase your Google Page Speed Score.

You might also be interested in:

Basic Usage:

1. Include jQuery javascript library and jQuery Lazy Scroll Loading Plugin in the header

<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="js/jquery.lazyscrollloading.js"></script>

2. The html

<ul id="lazyScrollLoading_ImageMode">
<li><img lazy-img="http://image_url_1" alt="Image1" /></li>
<li><img lazy-img="http://image_url_2" alt="Image2" /></li>
<li><img lazy-img="http://image_url_3" alt="Image3" /></li>
<li><img lazy-img="http://image_url_4" alt="Image4" /></li>
<li><img lazy-img="http://image_url_5" alt="Image5" /></li>
</ul>

3. The javascript

<script type="text/javascript">
$(document).ready(function() {
$("#lazyScrollLoading_ImageMode").lazyScrollLoading({
isDefaultLazyImageMode : true
});
});
</script> 

Change log:

v0.4.7 (2014-06-02)

  • Fix bug for Firefox
  • Compatible with closure advance mode

v0.4.6 (2014-05-04)

  • Add method: refreshLazyScrollLoading
  • Add resetScrollBarPositionAfterEventTriggered
  • Change default attribute lazy-img to data-lazyimg
  • Fix bug for IE

This awesome jQuery plugin is developed by h920526. For more Advanced Usages, please check the demo page or visit the official website.