Defer Loading Of Images And CSS Classes & Styles Using JavaScript – safe-defer.js

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