You only need to load this library (*) once on a page, ideally right after the opening <head> tag:
Code:<head> +Easily lazy-load JS, CSS, images, iframes - @shinsenter / defer.js Easily lazy-load JS, CSS, images, iframes A demo using @shinsenter / defer.js
Getting started
You only need to load this library (*) once on a page, ideally right after the opening
<head>tag:Code:<head> <title>My awesome page</title> <script src="//raw.githubusercontent.com/shinsenter/defer.js/master/defer_plus.min.js"></script> </head>Because the minified version of defer.js is super tiny, you can inline its content directly into the HTML document and avoid the network request.
(*) Examples on this page are using extended version of defer.js.
You can use browser's Developer Tool (press F12) to watch how requests are sent.
I added some spaces with gray background to demo lazy-load. Please scroll down.
But wait. Do you notice that there is a share buttons block on the top?
Your browser loaded it after 3 seconds since your page fired the 'load' event.
Code:<script type="text/javascript"> diff --git a/package-lock.json b/package-lock.json index 00472a1..ab1cf1b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,5 +1,5 @@ { "name": "@shinsenter/defer.js", - "version": "1.0.6", + "version": "1.0.7", "lockfileVersion": 1 } diff --git a/package.json b/package.json index 4183b62..a82ba66 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@shinsenter/defer.js", - "version": "1.0.6", + "version": "1.0.7", "description": "defer.js by shinsenter is a super tiny script to efficiently load JavaScript. Extended version supports CSS files, images and iframes. They are all easy to use.", "main": "defer_plus.min.js", "scripts": {