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

Category: Javascript , Loading | November 2, 2018
Author:philip-badilla
Views Total:1,142 views
Official Page:Go to website
Last Update:November 2, 2018
License:MIT

Preview:

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

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

You Might Be Interested In:


Leave a Reply