Skip to content
/ tada Public

Lightweight, no dependency library for lazy image load. Duplicate element check, throttled scroll handler, percent threshold supported.

License

Notifications You must be signed in to change notification settings

fallroot/tada

This branch is 1 commit ahead of master.

Folders and files

NameName
Last commit message
Last commit date

Latest commit

939a5d7 · Sep 1, 2021

History

22 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

TADA

Lightweight, no dependency library for lazy image load.

Features

  • Uses IntersectionObserver API
  • Duplicate element check
  • Debounced event handler
  • Percentage threshold

Usage

Use data-src attribute for actual image. This attribute name can be changed by calling Tada.setup method. If that attribute is used in non <img> tag, image will be background image.

<img src="placeholder.png" data-src="original.png">

<div data-src="background.png"></div>
/* CSS selector */
Tada.add('ul img')

/* HTML element */
var img = document.createElement('img')
img.setAttribute('src', 'placeholder.png')
img.setAttribute('data-src', 'original.png')

Tada.add(img)

/* In jQuery */
$.fn.tada = function () {
  return this.each(function () {
    Tada.add(this)
  })
}

$('img').tada()

Settings

If you want to change default settings, call Tada.setup method before using Tada.add.

Tada.setup({
  attribute: 'data-src',
  delay: 50,
  threshold: '20%',
  callback: function (element) {
    console.log(element)
  }
})

Tada.add(element)

Options

name default unit description
attribute data-src attribute name for image url
delay 50 milliseconds delay for scroll event activation
threshold 20% % or px. px can be omitted margin for early loading
callback function(element) {} callback after image loaded.

Browser compatibility

Internet Explorer 9+ and other major browsers are supported.

About

Lightweight, no dependency library for lazy image load. Duplicate element check, throttled scroll handler, percent threshold supported.

Resources

License

Stars

Watchers

Forks

Packages

No packages published