SkillAgentSearch skills...

Defer.js

🥇 A small JavaScript library to lazy-load almost anything. Defer.js is dependency-free, efficient, and optimized for Web Vitals.

GenerateConvertImprove

Install / Use

/learn @shinsenter/Defer.js
About this skill

Quality Score

0/100

Supported Platforms

Zed

README

@shinsenter/defer.js

🥇 A small JavaScript library to lazy-load almost anything. Defer.js is dependency-free, efficient, and optimized for Web Vitals.

NPM GitHub Release Date GitHub package.json version

<!-- [![npm bundle size (scoped)](https://img.shields.io/bundlephobia/minzip/@shinsenter/defer.js)](https://www.npmjs.com/package/@shinsenter/defer.js) -->

jsDelivr hits (npm)

💡 View document in other languages

Introduction

Large CSS files, slow JavaScript, or bulky media resources can negatively impact your website's Web Vitals, leading to a slow and frustrating user experience. But what if you could seamlessly defer these resources and boost your website's load speed?

By utilizing Defer.js, you can say goodbye to these issues! With its lazy loading capabilities, no dependencies, lightning-fast performance, and long experience, Defer.js is the ultimate solution for optimizing your website's Web Vitals. Whether you're using a modern or older browser, Defer.js makes it easy to enhance your website's user experience with fast loading times.

Why Choose Defer.js

  • 🧩 Lazy load easily almost anything
  • 🔰 Easy to use, even for beginners
  • 🚀 Lightweight and very fast, with no dependencies
  • ⚡️ Super tiny (compressed size is around 1KB)
  • 🤝 Seamlessly integrates with your favorite frameworks
  • 🦾 Optimized for the latest Web Vitals standards
  • 📱 Optimized for smartphones
  • ✅ Supports older browsers like Internet Explorer 9 <sup>(*)</sup>

Contributing

NPM

If you find the project useful, please give it a star or consider donating via PayPal. You can also open a discussion on Github if you have any idea to improve the library.

Donate via PayPal Become a Stargazer Report an issue

Your support helps maintain and improve this project for the community.

I appreciate you respecting my effort in creating this library. If you intend to copy or use ideas from this project, please give proper credit.

Getting Started

Defer.js is an easy-to-use library that will help boost your website's performance by reducing loading times. Here's how to get started:

Basic

Add the Defer.js library to your page by including a <script> tag just below the opening <head> tag.

<head>
  <meta charset="UTF-8" />
  <title>My Awesome Page</title>

  <!-- Add Defer.js here -->
  <script src="https://cdn.jsdelivr.net/npm/@shinsenter/defer.js@3.9.0/dist/defer.min.js"></script>

  <!-- ... -->
</head>

Inlining the Library

To save an HTTP request, you can even inline the entire Defer.js library by copying its content from the defer.min.js and replacing the comments in the script tag with its content.

<head>
  <meta charset="UTF-8" />
  <title>My Awesome Page</title>

  <!-- Add the Inlined Defer.js here -->
  <script>/* Defer.js content goes here */</script>

  <!-- ... -->
</head>

Compatibility with Older Versions

If you're using Defer.js v1.x, you can use defer_plus.min.js instead of defer.min.js without wondering about migrations.

<head>
  <meta charset="UTF-8" />
  <title>My Awesome Page</title>

  <!-- Put defer_plus.min.js here -->
  <script src="https://cdn.jsdelivr.net/npm/@shinsenter/defer.js@3.9.0/dist/defer_plus.min.js"></script>

  <!-- ... -->
</head>

For OLD Browsers (such as IE9)

To enhance performance for older browsers that don't support the IntersectionObserver feature, you can load the IntersectionObserver polyfill library after the defer.min.js script tag.

<script>/* Defer.js content */</script>

<!-- Add the IntersectionObserver Polyfill for legacy browsers -->
<script>'IntersectionObserver'in window||document.write('<script src="https://cdn.jsdelivr.net/npm/@shinsenter/defer.js@3.9.0/dist/polyfill.min.js"><\/script>');</script>

NOTE: Modern browsers support the IntersectionObserver feature, so you don't have to worry about adding the polyfill if you don't have older browsers in mind.

Functions

Typedefs

<a name="Defer"></a>

Defer(func, [delay], [waitForUserAction]) ⇒ <code>void</code>

Heavy DOM changes may slow down your page. Wrap your scripts in Defer() to avoid slowing page load.

Kind: global function Since: 2.0

| Param | Type | Default | Description | | --- | --- | --- | --- | | func | <code>function</code> | | A function to be executed after the page is fully loaded. | | [delay] | <code>number</code> | <code>0</code> | Delay in milliseconds before function runs. | | [waitForUserAction] | <code>boolean</code> | <code>number</code> | <code>false</code> | If set, Defer() waits for user interaction before running the script. |

Example This example uses jQuery to modify the DOM. It will attach <pre><code></code></pre> blocks to the document as soon as the page finishes loading.

<script>
  function generate_code_blocks () {
    $('.demo').each(function() {
      var code = $('<pre><code class="language-html"></code></pre>');
      var demo = $(this);
      var html = demo.html().trim().replace(/ {4}/g, '  ');

      code.children().text(html);
      demo.append(code);
    });
  }

  Defer(generate_code_blocks, 0);
</script>

Example Sometimes you want scripts to run only after user interaction.

The third argument tells Defer() to delay executing the function and wait until the user starts interacting with your page.

<style>
  body.moving {
    background: linear-gradient(270deg, #c2fff5, #eec3f0, #a1c1ff);
    background-size: 600% 600%;
    animation: moving_bg 30s ease infinite;
  }
</style>

<script>
  function make_background_animate() {
    // jQuery is used in this example to attach a class to the <body> tag.
    // You won't see the animated background until you start interacting.
    $('body').addClass('moving');
  }

  Defer(make_background_animate, 0, true);
</script>

<a name="Defer.lazy"></a>

Defer.lazy : <code>boolean</code> | <code>number</code>

The Defer.lazy variable was added since v3.0.

Setting Defer.lazy=true delays scripts until user interaction.

Changing this variable will also affect the default value of the waitForUserAction argument in these functions:

Kind: static property of <code>Defer</code> Default: <code>(not set)</code> Access: public Since: 3.0 Example To modify default Defer() behavior:

<!-- You can put this right below the script tag containing defer.min.js -->
<script>Defer.lazy = true;</script>

Example You can set a timeout period in milliseconds for the Defer.lazy variable or any waitForUserAction argument. Scripts run automatically after timeout without interaction.

<

Related Skills

docs-writer

99.6k

`docs-writer` skill instructions As an expert technical writer and editor for the Gemini CLI project, you produce accurate, clear, and consistent documentation. When asked to write, edit, or revie

model-usage

341.8k

Use CodexBar CLI local cost usage to summarize per-model usage for Codex or Claude, including the current (most recent) model or a full model breakdown. Trigger when asked for model-level usage/cost data from codexbar, or when you need a scriptable per-model summary from codexbar cost JSON.

ddd

Guía de Principios DDD para el Proyecto > 📚 Documento Complementario : Este documento define los principios y reglas de DDD. Para ver templates de código, ejemplos detallados y guías paso

arscontexta

2.9k

Claude Code plugin that generates individualized knowledge systems from conversation. You describe how you think and work, have a conversation and get a complete second brain as markdown files you own.

shinsenter

View profile

View on GitHub
GitHub Stars284
CategoryContent
Updated10d ago
Forks47
shinsenter/defer.js

Languages

JavaScript

Security Score

100/100

Audited on Mar 20, 2026

No findings