Skip to content

Latest commit

 

History

History
72 lines (52 loc) · 1.5 KB

README.md

File metadata and controls

72 lines (52 loc) · 1.5 KB
Raw

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.