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.

<imgsrc="placeholder.png" data-src="original.png"><divdata-src="background.png"></div>

/* CSS selector */Tada.add('ul img')/* HTML element */varimg=document.createElement('img')img.setAttribute('src','placeholder.png')img.setAttribute('data-src','original.png')Tada.add(img)/* In jQuery */$.fn.tada=function(){returnthis.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.