JavaScript Document Onload + TypeScript version

Posted by Dmitry

Updated on

🗃 This article is a part of the JavaScript Basics series.
javascript browser DOM snippet basics

Here is a straightforward way to catch document loading. It's supported by modern browsers. You can use it as an alternative to jQuery $.ready.

function domReady(cb) {
  if (document.readyState === "complete" || document.readyState === "interactive") {
    cb();
  } else {
    document.addEventListener("DOMContentLoaded", cb);
  }
}


domReady(() => {
  console.log("DOM: I'm ready");
});

TypeScript Version

function domReady(cb: Function): void {
  if (document.readyState === "complete" || document.readyState === "interactive") {
    cb();

  } else {
    document.addEventListener("DOMContentLoaded", (event: Event) => {
      cb();
    });
  }
}
Keep in mind that DOMContentLoaded fires when HTML is loaded and parsed. It's not waiting for external stylesheets and scripts to load. You can consider using window load event.

The Latest

recv() failed (104: Connection reset by peer) while reading response header from upstream

uWSGI. recv() failed (104: Connection reset by peer) while reading response header from upstream
python uwsgi error snippet

Geolocate the Location of an IP Address With Cloudflare Workers and JavaScript

Geolocate the Location of an IP Address With Cloudflare Workers and JavaScript
javascript cloudflare geolocation workers

Detect a visitor's country and city by IP address with Cloudflare Workers and JavaScript.

How to Create Jinja2 Filters in Flask

How to Create Jinja2 Filters in Flask.
python flask jinja2 snippet

In this post, I'll talk about filters. Jinja2 has a list of built-in filters, and Flask leverages them.

How to Upload Files To Bunny.net Storage

How to Upload Files To Bunny.net Storage
python bunny_net storage snippet

Bunny.net is a well-known CDN and storage among developers. Here is my python snippet on how to upload a file to the storage.

How to Copy Text to Clipboard With Javascript

How to Copy Text to Clipboard With Javascript.
javascript DOM browser

Here is a short snippet on how to copy text to the clipboard with Javascript. Your visitors will thank you. Most likely not, but here we are.

Flask Boilerplate and Your Guide to Flask in 2023. With SQLAlchemy.

Flask Boilerplate and Your Guide to Flask in 2023. With SQLAlchemy.
boilerplate open source flask

Flask-Backbone is my take to create an initial structure and a set of rules, so most of my flask projects are easy to support.

How to Import CSV Files to PostgreSQL with Pgfutter

How to Import CSV Files to PostgreSQL with Pgfutter.
csv postgresql

Sometimes I need to upload large CSV files to PostgreSQL. CSV file might have hundreds of columns, that's why i want a tool that can do some magic for me.

How to Upload Files to DigitalOcean Spaces with Python

How to Upload Files to DigitalOcean Spaces with Python
digitalocean python

Snippet on how to upload files to DigitalOcean Spaces with boto3 and python.

The Definitive Guide To Sitemaps With Python

The Definitive Guide To Sitemaps With Python
open source python

Sitemaps are important. Especially for big websites. It is always a good idea to develop your website with SEO in mind. Unfortunately, most developers ignore this part.

A Short Guide To The Chinese Coordinate System

A Short Guide To The Chinese Coordinate System. GCJ-02(gcj 02) Explained.
简体中文 Deutsch 日本語 maps javascript china

Have your ever searched google maps china offset? Most people who was in China yes. Here is my story behind this question.