Package Exports

@nechehin/lazyload

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@nechehin/lazyload) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

lazyload

Javascript plugin for lazyload images and iframes. Fork of https://github.com/tuupola/jquery_lazyload , but with IntersectionObserver mode support . Support src, srcset attributes for image and src for iframe. Use it as data-src, data-srcset.

Install

Load as script in your HTML

Copy source to yout public dir and connect script in HTML page. Example:

<img data-src="https://via.placeholder.com/640x480?text=Lazy+image" class="lazy">

<iframe data-src="https://www.youtube.com/embed/9UkYhRXf5cg" class="lazy" 
        width="560" height="315" frameborder="0" allowfullscreen></iframe>

<!-- Load jquery, if not yet loaded -->
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<!-- Load lazyload.js -->
<script src="/js/lazyload.min.js"></script>
<script>
    $('.lazy').lazyload();
</script>

As NPM module

npm i @nechehin/lazyload

use:

import 'jquery';
import '@nechehin/lazyload';

jQuery(function() {
    jQuery('.lazy').lazyload();
});

How to use

<img class="lazy" data-src="img/example.jpg" width="640" height="480">

<iframe data-src="https://www.youtube.com/embed/9UkYhRXf5cg" class="lazy" 
        width="560" height="315" frameborder="0" allowfullscreen></iframe>

then in your code do:

$("img.lazy").lazyload();