This project is forked from tuupola/jquery_lazyload and add features below:
* Many Details for improve performance;
* IE6/7 support;
* Available with Zepto;
* `vertical_only` \ `minimum_interval` \ `use_minimum_interval_in_ios` \ `no_fake_img_loader` options.
More information on jieyou/lazyload.
Images below the fold (the ones lower than window bottom) are not loaded. When scrolling down they are loaded when needed. Empty cache and shift-reload to test again. Compare this to page where plugin is disabled, same page with fadein effect, page with wide layout or wide content inside container.
<script src="http://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.14/require.min.js"></script> <script> require.config({ // baseUrl: 'js/lib', paths: { // the left side is the module ID, // the right side is the path to // the jQuery file, relative to baseUrl. // Also, the path should NOT include // the '.js' file extension. This example // is using jQuery 1.9.0 located at // js/lib/jquery-1.9.0.js, relative to // the HTML page. jquery: 'http://webmap2.map.bdimg.com/yyfm/jQuery_1.x/1.10.2/js/jQuery_1.x.min' } }); </script> <script> require(['jquery','../lazyload'],function($){ $(".lazy").lazyload() }) </script>
<img class="lazy" data-original="img/example.jpg" width="765" height="574">