Lazy load the Facebook JS SDK.
Overview
Use this utility to setup an arbitrary element of the document to act as an anchor position that, when it's about to enter the window viewport, will fire the injection of the Facebook SDK script tag.
Usage
Dependencies
To get the
lazy-load-fb-sdk
utility working, include the dependencies in your project in the following order:
"design-system": "git+ssh://git@github.com/Selectra-Dev/design-system.git"
import lazyLoadFbSDK from 'design-system/src/js/00-utilities/lazy-load-fb-sdk';
Basic code
This function will search the document for elements which have a
data-loadscript
attribute set to
'fb-sdk'.
It will then check the
data-scripturl
(mandatory) and
data-fbappid
(optional) attributes, and use the value assigned to them to create a new
script
tag that will be injected into the DOM once the anchor element enters the viewport, hence deferring the loading of that script until that moment.
<div data-loadscript="fb-sdk" data-scripturl="https://url/of/script.js" data-fbappid="your-fb-app-id-number-goes-here"></div>
div( data-loadscript='fb-sdk' data-scripturl='https://url/of/script.js' data-fbappid='your-fb-app-id-number-goes-here' )
lazyLoadFbSDK( 100 );
Function call
lazyLoadFbSDK( offset );
| # | Name | Type | Default | Required | Description |
|---|---|---|---|---|---|
| 0 | offset | Number |
/ | Yes | An offset in pixel units to add to the calculations that check if the anchor element is present in the viewport. |
HTML attributes
Use the following data attributes to configure the script tag that will be injected.
data-loadscript
Set this attribute value to
'fb-sdk'
to mark the element to be processed by the script.
<div data-loadscript="fb-sdk" data-scripturl="https://url/of/script.js" data-fbappid="your-fb-app-id-number-goes-here"></div>
data-scripturl
The URL of the SDK script you want to inject in the DOM.
<div data-loadscript="fb-sdk" data-scripturl="https://url/of/script.js" data-fbappid="your-fb-app-id-number-goes-here"></div>
data-fbappid
A Facebook APP ID number.
<div data-loadscript="fb-sdk" data-scripturl="https://url/of/script.js" data-fbappid="your-fb-app-id-number-goes-here"></div>