Skip to content

Commit

Permalink
Precise usage & better comments
Browse files Browse the repository at this point in the history
  • Loading branch information
devenini committed Oct 19, 2021
1 parent 8b40b1a commit 7d35dcb
Show file tree
Hide file tree
Showing 2 changed files with 20 additions and 9 deletions.
18 changes: 14 additions & 4 deletions assets/scripts/modules/Scroll.js
Original file line number Diff line number Diff line change
Expand Up @@ -24,11 +24,21 @@ export default class extends module {
}

/**
* Lazy load
* See '../utils/image'
* Recommended to wrap your image in `.c-lazy`. `-lazy-loaded` modifier will be applied on both parent and children
* Lazy load the related image.
*
* @param {obj} | Locomotive Scroll object
* @see ../utils/image.js
*
* It is recommended to wrap your `<img>` into an element with the
* CSS class name `.c-lazy`. The CSS class name modifier `.-lazy-loaded`
* will be applied on both the image and the parent wrapper.
*
* ```html
* <div class="c-lazy o-ratio u-4:3">
* <img data-scroll data-scroll-call="lazyLoad, Scroll, main" data-src="http://picsum.photos/640/480?v=1" alt="" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" />
* </div>
* ```
*
* @param {LocomotiveScroll} args - The Locomotive Scroll instance.
*/
lazyLoad(args) {
lazyLoadImage(args.obj.target, null, () => {
Expand Down
11 changes: 6 additions & 5 deletions assets/scripts/utils/image.js
Original file line number Diff line number Diff line change
Expand Up @@ -39,13 +39,14 @@ export function getImageMetadata($img) {
}

/**
* Lazy load images
* Lazy load the given image.
*
* @param {node} | $el
* @param {string} | url
* @param {function} | callback
* @param {HTMLImageElement} $el - The image element.
* @param {?string} url - The URI to lazy load into $el.
* If falsey, the value of the `data-src` attribute on $el will be used as the URI.
* @param {?function} callback - A function to call when the image is loaded.
*/
export async function lazyLoadImage($el, url, callback = () => {}) {
export async function lazyLoadImage($el, url, callback) {
let src = url ? url : $el.dataset.src

let loadedImage = LAZY_LOADED_IMAGES.find(image => image.url === src)
Expand Down

0 comments on commit 7d35dcb

Please sign in to comment.