• Stars
    star
    8,762
  • Rank 3,892 (Top 0.08 %)
  • Language
    JavaScript
  • License
    MIT License
  • Created over 15 years ago
  • Updated 4 months ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Vanilla JavaScript plugin for lazyloading images

Lazy Load Remastered

Lazy Load delays loading of images in long web pages. Images outside of viewport will not be loaded before user scrolls to them. This is opposite of image preloading.

This is a modern vanilla JavaScript version of the original Lazy Load plugin. It uses Intersection Observer API to observe when the image enters the browsers viewport. Original code was inspired by YUI ImageLoader utility by Matt Mlinac. New version loans heavily from a blog post by Dean Hume.

Basic Usage

By default Lazy Load assumes the URL of the original high resolution image can be found in data-src attribute. You can also include an optional low resolution placeholder in the src attribute.

<script src="https://cdn.jsdelivr.net/npm/[email protected]/lazyload.js"></script>

<img class="lazyload" data-src="img/example.jpg" width="765" height="574" />
<img class="lazyload" src="img/example-thumb.jpg" data-src="img/example.jpg" width="765" height="574" />

With the HTML in place you can then initialize the plugin using the factory method. If you do not pass any settings or image elements it will lazyload all images with class lazyload.

lazyload();

If you prefer you can explicitly pass the image elements to the factory. Use this for example if you use different class name.

let images = document.querySelectorAll(".branwdo");
lazyload(images);

If you prefer you can also use the plain old constructor.

let images = document.querySelectorAll(".branwdo");
new LazyLoad(images);

The core IntersectionObserver can be configured by passing an additional argument

new LazyLoad(images, {
     root: null,
     rootMargin: "0px",
     threshold: 0
});

Additional API

To use the additional API you need to assign the plugin instance to a variable.

let lazy = lazyload();

To force loading of all images use loadimages().

lazy->loadImages();

To destroy the plugin and stop lazyloading use destroy().

lazy->destroy();

Note that destroy() does not load the out of viewport images. If you also want to load the images use loadAndDestroy().

lazy->loadAndDestroy();

Additional API is not avalaible with the jQuery wrapper.

jQuery Wrapper

If you use jQuery there is a wrapper which you can use with the familiar old syntax. Note that to provide BC it uses data-original by default. This should be a drop in replacement for the previous version of the plugin.

<img class="lazyload" data-original="img/example.jpg" width="765" height="574">
<img class="lazyload" src="img/example-thumb.jpg" data-original="img/example.jpg" width="765" height="574">
$("img.lazyload").lazyload();

Cookbook

Blur Up Images

Low resolution placeholder ie. the "blur up" technique. You can see this in action in this blog entry. Scroll down to see blur up images.

<img class="lazyload"
     src="thumbnail.jpg"
     data-src="original.jpg"
     width="1024" height="768" />
<div class="lazyload"
     style="background-image: url('thumbnail.jpg')"
     data-src="original.jpg" />

Responsive Images

Lazyloaded Responsive images are supported via data-srcset. If browser does not support srcset and there is no polyfill the image from data-src will be shown.

<img class="lazyload"
     src="thumbnail.jpg"
     data-src="large.jpg"
     data-srcset="small.jpg 480w, medium.jpg 640w, large.jpg 1024w"
     width="1024" height="768" />
<img class="lazyload"
     src="thumbnail.jpg"
     data-src="normal.jpg"
     data-srcset="normal.jpg 1x, retina.jpg 2x"
     width="1024" height="768" />

Inlined Placeholder Image

To reduce the amount of request you can use data uri images as the placeholder.

<img src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs="
     data-src="original.jpg"
     width="1024" height="768" />

Install

This is still work in progress. You can install beta version with yarn or npm.

$ yarn add lazyload
$ npm install lazyload

License

All code licensed under the MIT License. All images licensed under Creative Commons Attribution 3.0 Unported License. In other words you are basically free to do whatever you want. Just don't remove my name from the source.

More Repositories

1

slim-jwt-auth

PSR-7 and PSR-15 JWT Authentication Middleware
PHP
819
star
2

jquery_chained

Chained Selects for jQuery and Zepto
JavaScript
589
star
3

slim-basic-auth

PSR-7 and PSR-15 HTTP Basic Authentication Middleware
PHP
438
star
4

slim-api-skeleton

Slim 3 API skeleton project for Composer
PHP
312
star
5

hagl

Hardware Agnostic Graphics Library for embedded
C
277
star
6

jquery_viewport

Add viewport selectors to jQuery. For example $("img:below-the-fold").something()
HTML
258
star
7

branca-spec

Authenticated and encrypted API tokens using modern crypto
215
star
8

server-timing-middleware

PSR-7 & PSR-15 middleware to add the Server-Timing header
PHP
196
star
9

base62

Base62 encoder and decoder for arbitrary data
PHP
189
star
10

micropython-mpu9250

MicroPython I2C driver for MPU9250 9-axis motion tracking device
Python
134
star
11

cors-middleware

PSR-7 and PSR-15 CORS middleware
PHP
131
star
12

ksuid

K-Sortable Globally Unique IDs for PHP
PHP
100
star
13

branca-js

Authenticated encrypted API Tokens for JavaScript.
JavaScript
94
star
14

php_google_maps

API to help working with Google Static Maps.
PHP
84
star
15

avr_demo

Atmel demo code. Does not use any Arduino libraries. I want to learn this the hard way (tm).
Makefile
79
star
16

micropython-m5stack

MicroPython Kitchen Sink for M5Stack
Python
75
star
17

slim-image-resize

Image Resize Middleware for Slim Framework
PHP
61
star
18

branca-php

Authenticated and encrypted API tokens using modern crypto
PHP
54
star
19

base58

Base58 encoder and decoder for arbitrary data
PHP
50
star
20

hagl_esp_mipi

ESP32 MIPI DCS abstraction layer for the HAGL graphics library
C
46
star
21

pybranca

Authenticated Encrypted API Tokens for Python.
Python
46
star
22

esp_video

Proof of concept video player for ESP32 boards
C
45
star
23

instrument

PHP application instrumentation toolkit
PHP
44
star
24

esp_effects

Old school demo effects for ESP32
C
38
star
25

hagl_pico_mipi

Raspberry Pi Pico MIPI DCS absraction layer for the HAGL graphics library
C
36
star
26

slim-facebook

Boilerplate Facebook application with Slim, Eloquent and Facebook API.
JavaScript
34
star
27

demo_code

Miscallenous demo code.
JavaScript
32
star
28

whereami

Common PHP interface for wifi positioning services
PHP
32
star
29

axp192

Platform agnostic I2C driver for AXP192 power system management IC
C
30
star
30

esp_examples

The mandatory ESP-IDF (ESP32) examples repository
C
28
star
31

jquery_filestyle

jQuery plugin for styling file input elements.
JavaScript
28
star
32

base85

Base85 encoder and decoder for arbitrary data
PHP
27
star
33

jquery_dictionary

Spotlight searchable offline jQuery API documentation for OS X.
25
star
34

trilateration

Trilateration for PHP
PHP
24
star
35

pico_effects

Old school demo effects for Raspberry Pi Pico
C
21
star
36

witchcraft

Opionated PHP magic methods as traits for PHP 5.4+
PHP
21
star
37

pcf8563

Platform agnostic I2C driver for PCF8563 RTC
C
19
star
38

micropython-ili934x

MicroPython SPI Driver for ILI934X Series Based TFT / LCD Displays
Python
17
star
39

wolf_assets

Mephisto style assets management for Wolf CMS. This plugin is currently unmaintained. Let me know if you want to take over.
PHP
17
star
40

micropython-mpu6886

MicroPython I2C driver for MPU6886 6-axis motion tracking device
Python
17
star
41

http-factory

Lightweight autodiscovering PSR-17 HTTP factories
PHP
17
star
42

esp_software_i2c

Software I2C driver for ESP-IDF (ESP32)
C
16
star
43

flat-ui-theme

Flat UI theme for TextMate 2 and Sublime Text
15
star
44

embedded-fonts

FONTX fonts for embedded projects
C
14
star
45

sdl2_effects

Old school demo effects with HAGL and SDL2
C
14
star
46

base32

Base32 encoder and decoder for arbitrary data
PHP
13
star
47

php-docker-k8s

Examples how to run PHP with Docker and Kubernetes
PHP
11
star
48

slim-todo-backend

Slim 3 + Spot example for todobackend.com
PHP
11
star
49

slim-skeleton

Slim 3 + Datamapper + Monolog + Plates project for Composer
PHP
11
star
50

instrument-middleware

PSR-7 Middleware for instrumenting PHP applications
PHP
11
star
51

callable-handler

Compatibility layer between PSR-7 double pass and PSR-15 middlewares
PHP
10
star
52

branca-middleware

PSR-7 and PSR-15 Branca token authentication middleware
PHP
9
star
53

micropython-lis2hh12

MicroPython I2C driver for LIS2HH12 3-axis accelerometer
Python
9
star
54

wolf_dashboard

Provides simple admin dashboard to Wolf CMS.
PHP
9
star
55

branca-elixir

Secure alternative to JWT. Authenticated encrypted API tokens for Elixir.
Elixir
8
star
56

hagl_sdl2

SDL2 abstraction layer for the HAGL graphics library
C
8
star
57

frog_jquery

Add jQuery to Frog CMS admin interface.
PHP
8
star
58

micropython-examples

The mandatory various experiments with MicroPython repository
Python
8
star
59

jquery_jeditable_wysiwyg

Wysiwyg input for Jeditable.
JavaScript
8
star
60

bm8563

Platform agnostic I2C driver for BM8563 RTC
C
8
star
61

wolf_funky_cache

Funky cache plugin for Wolf CMS
PHP
7
star
62

beeper

Generic paginator for PHP 7.1+
PHP
7
star
63

axp202

Platform agnostic I2C driver for AXP202 PMU
C
7
star
64

jquery_jeditable_markitup

Universal markup editor for Jeditable.
7
star
65

axp173

Platform agnostic I2C driver for AXP173 power system management IC
C
6
star
66

triple-a

Alternative AVR (Arduino) Library
C
6
star
67

wolf_first_child

Redirect to first child page behaviour for Wolf CMS.
PHP
6
star
68

php_record

Simple Active Record implementation in PHP.
PHP
6
star
69

rack-facebook-method-fix

Rack middleware to fix Facebook always POST problem.
Ruby
6
star
70

esp_gfx

HAGL speed tests for ESP32 boards
C
5
star
71

rack-funky-cache

Funky caching for Rack based applications
Ruby
5
star
72

frog_email_template

Provides form mailer backend to Frog CMS. This code is no longer maintained. Please go to: https://github.com/dajare/wolf_email_template
PHP
5
star
73

mephisto_sitemap

Mephisto plugin which implements (Google, MSN, Yahoo ) Sitemap protocol.
Ruby
5
star
74

esp_twatch2020

Kitchen sink project for T-Watch 2020 and ESP-IDF
C
5
star
75

trytes

Trytes encoder and decoder for arbitrary data
PHP
4
star
76

wolf_jquery_ui

Add jQuery UI to Wolf CMS admin interface.
PHP
4
star
77

em-websocket-server

Simple websocket server with EventMachine
Ruby
4
star
78

esp_i2c_helper

ESP I2C master HAL for hardware agnostic I2C drivers
C
4
star
79

screenshot

Full size website screenshots with Sinatra.
JavaScript
4
star
80

micropython-gnssl76l

MicroPython I2C driver for Quectel GNSS L76-L (GPS)
Python
4
star
81

pico_gfx

HAGL speed tests for Rasrpberry Pi Pico boards
C
4
star
82

hagl_esp_solomon

ESP32 Solomon HAL for the HAGL graphics library
C
4
star
83

hagl_gd

GD HAL for the HAGL graphics library
C
3
star
84

fontx_tools

C
3
star
85

slim-fake-mcrypt

Fake PHP mcrypt extension to enable installing Slim 2.3.* with Composer
3
star
86

dbal-psr3-logger

PSR-3 Logger for Doctrine DBAL
PHP
3
star
87

ulid

Universally Unique Lexicographically Sortable Identifier
PHP
3
star
88

corelocation

PHP implementation of Apple location services protocol
PHP
3
star
89

esp_mipi

Low level MIPI DCS compatible display driver for ESP-IDF
C
3
star
90

rack-lazy-load

Companion Rack middleware for Lazy Load jQuery plugin.
Ruby
2
star
91

hagl_gd32v_mipi

GD32V MIPI DCS HAL for the HAGL graphics library
C
2
star
92

appelsiini.net

Sources and build files for my personal blog.
HTML
2
star
93

gd32v_effects

Old school demo effects for GD32V
C
2
star
94

branca-cli

Command line tool for encoding, decoding and inspecting Branca tokens
JavaScript
2
star
95

wolf_jquery_tools

Add jQuery Tools to Wolf CMS admin interface.
PHP
2
star
96

messente

An object-oriented Ruby wrapper for the Messente API.
Ruby
1
star
97

gd32v_gfx

HAGL speed tests for GD32V boards
C
1
star
98

slim-basepath

Demonstrate differences between Slim 3 and Slim 4
PHP
1
star
99

base85.io

CSS
1
star
100

.github

1
star