Author: | philip-badilla |
---|---|
Views Total: | 1,161 views |
Official Page: | Go to website |
Last Update: | November 2, 2018 |
License: | MIT |
Preview:

Description:
safe-defer.js is an SEO-friendly JavaScript lazy load library that has the ability to defer the loading of images, CSS classes, and inline CSS styles to improve your page load time.
How to use it:
Link to the safe-defer.js.
<script src="/src/safe-defer.js"></script>
Initialize the library and we’re ready to go.
(function() { safeDefer.deferAll(); })();
Defer the loading of images using the data-safe-defer-src
attribute:
<img src="1.jpg" data-safe-defer-src/>
Defer the loading of CSS classes using the data-safe-defer-class
attribute:
<div class="wallpaper stall" data-safe-defer-class="stall"></div>
Defer the loading of inline styles using the data-safe-defer-style
attribute:
<div class="wallpaper" style="background-image: url('bg.jpg')" data-safe-defer-style> </div>
All possible options.
// default attributes srcDeferAttribute: "data-safe-defer-src", styleDeferAttribute: "data-safe-defer-style", classDeferAttribute: "data-safe-defer-class", srcBackingAttribute: "data-safe-deferred-src", // image placeholder imagePlaceholder: "data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=", // debug mode debugMode: false