Best jQuery Lazy Load Plugins & Tutorials with Demo

jQuery Multi Purpose Media Boxes – Responsive Grid

jQuery Multi Purpose Media Boxes - Responsive Grid

This is a HTML | CSS | JQuery Fully Responsive Portfolio in a pinterest style with a lightbox. It will adapt to the width of its container so you can put it anywhere and you can put anything inside the boxes. Also you don’t have to load all the images at once (for performance purposes) so you can specify the number of images to load when it first load and the number of images to load when you click the “load more images” button.
The navigation filter bar is generated automatically from the categories you specify to each image.

Features:

  • Fully responsive grid and lightbox
  • Lazy Load Feature
  • The Lightbox Support images and iframes of any dimensions and it will keep the right proportions
  • The filter navigation bar is generated automatically from the categories you specify to each thumbnail
  • Set the number of images to load at start and when you click the “load more images” button
  • Support thumbnails for the grid only to the images you want to improve performance
  • Fully Responsive Grid and Lightbox
  • Full width, the grid will adapt to the 100% of its container if you set the width of each column to ‘auto’
  • You can specify a static width for each column or specify number of columns
  • When specifying the number of columns you can set the minimum width for each column
  • CSS3 Effects
  • Direction aware hover effect
  • Lightbox with slideshow (play, pause, auto-play)
  • Easy implementation
  • Compatible with Twitter Bootstrap

Echo.js : Simple JavaScript Image lazy loading

Echo.js : Simple JavaScript Image lazy loading

Echo.js, simple JavaScript image lazy loading via HTML5 data-* attributes, superfast and standalone (jQuery free).Lazy-loading works by only loading the assets needed when the elements ‘would’ be in view, which it’ll get from the server for you upon request, which is automated by simply changing the image src attribute. This is also an asynchronous process which also benefits us.

lazyBlock : Conditionally load content in Responsive designs with JavaScript

lazyBlock : Conditionally load content in Responsive designs with JavaScript

lazyBlock is a proof-of-concept to show how content can be conditionally loaded in responsive designs without relying on AJAX to fetch that content. Content is included in the original mark-up but is placed within <script> tags with the type text/html. Based on user action or screen width, the content can then be moved from the <script> tag and then injected into the DOM by lazyBlock.

least.js : jQuery Responsive HTML 5, CSS3 Gallery with LazyLoad

least.js : jQuery Responsive HTML 5, CSS3 Gallery with LazyLoad

least.js is ajQuery plugin for Random & Responsive HTML 5, CSS3 Gallery with LazyLoad.

jQuery Unveil : A very lightweight plugin to lazy load images

jQuery Unveil : A very lightweight plugin to lazy load images

A very lightweight jQuery plugin to lazy load images.This plugin is very useful and it boosts performance delaying loading of images in long web pages because images outside of viewport (visible part of web page) won’t be loaded until the user scrolls to them. Lazy Load has some cool options such as custom effects, container, events or data attribute. If you’re not gonna use any of them you can reduce the file size by leaving just the essential code to show the images. That’s what I did and this is my lightweight version of Lazy Load with support for serving high-resolution images to devices with retina displays – less than 1k<.

Stalactite : jQuery plugin that packs child elements together

Stalactite : jQuery plugin that packs child elements together

A jquery plugin that slowly and lazily packs the contents of an element. Unlike most packing libraries that try to do all the math and sorting up front, stalactite takes a lazy approach and sorts each child element sequentially. This can add a sense of curation as it makes your viewer aware of the browser’s decisions.

It sorts all types of content and is especially diligent about images, videos, and iframes making sure to load all media before assessing proper widths and heights.

InfiniWall : Infinite, loopable, lazy loaded, 360° scroller for desktop & mobile

InfiniWall : Infinite, loopable, lazy loaded, 360° scroller for desktop & mobile

InfiniWall is a script for desktop and mobile that lets you pan/scroll a potentially infinite number of elements on screen. It is obsessively optimized for mobile devices which have limited power and memory and notoriously have troubles handling a large number of tags at the same time (especially images).

How to Create Lazy-Loading Images with jQuery

How to Create Lazy-Loading Images with jQuery

The effects of lazy load images can be seen on a number of websites. This technique forces your images to pause the loading process until the reader has viewed that specific area of the page. Web designers can build this onto a webpage through a number of resources, especially jQuery plugins.

In this article I’d like to examine lazy loading images and why so many people are interested in the technique. Then I’ll offer a brief tutorial which explains how you can include a popular jQuery plugin and customize the settings for your own lazy image loader. This doesn’t require much knowledge in the realm of JavaScript which is great for non-technical webmasters.

xSquare : Responsive Image Slider in html5/jquery

xSquare : Responsive Image Slider in html5/jquery

xSquare is a responsive jQuery image slider. It has a layout that consists of grids making it useful for variety of web page positions. Though the main purpose of the image slider is within a banner position it can easily be implemented as an image gallery or something similar because it is compatible with lightbox, prettyPhoto etc. The loading of images is done via smart lazyLoad with an implemented loader. Effective sliding transitions make the slider have a more dynamic look. The xSquare responsive image slider gives you the option to place up to 7 images in one slide or to place one effectively sliced photo.