Feature-rich High-Performance Image Loading Plugin - jQuery loadimage.js

File Size: 21.9 KB
Views Total: 484
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Feature-rich High-Performance Image Loading Plugin - jQuery loadimage.js

loadimage.js is a jQuery plugin that helps enhance your website's image loading and browsing experience.

It provides a smooth and efficient image loading experience by allowing only a certain number of images to load in parallel. This way, images close to the top of the page are loaded first, ensuring that the user has a quick and responsive experience. The images that are not immediately loaded will wait in a queue and are loaded as soon as other images have finished loading.

In addition, the plugin comes with several other helpful features that enhance the image browsing experience, such as the ability to display large images in a modal popup on click, a loading spinner that shows while the image is loading, an X icon that displays when an image fails to load, and more.

How to use it:

1. Download and import the loadimage plugin's files.

<!-- jQuery Is Required -->
<script src="/path/to/cdn/jquery.min.js"></script>

<!-- jQuery loadimage.js plugin -->
<link href="./dist/css/loadimage.css" rel="stylesheet" />
<script src="./dist/js/loadimage.js"></script>

2. Limit the number of images that can be fetched concurrently. Excess images will be placed in a First-In-First-Out queue. Default: 4.

  processLimit: 2

3. Initialize the plugin on your images. Note that you must embed your images using DIV element instead of <img />.

<div class="example">
  <div src="1.jpg"></div>
  <div src="2.jpg"></div> 
  <div src="3.jpg" href="3-large.jpg">With Image Lightbox</div>
  $('.example div').loadimage();

4. Apply additional CSS classes to the images.

$('.example div').loadimage({
  transition: 'opacity 10s', 
  border: 'solid gray 1px',
  // more CSS properties here

This awesome jQuery plugin is developed by darincardin. For more Advanced Usages, please check the demo page or visit the official website.