Trigger Callbacks When Images Have Been Loaded - jQuery waitForImages

File Size: 106 KB
Views Total: 3237
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Trigger Callbacks When Images Have Been Loaded - jQuery waitForImages

waitForImages is a very small (~2kb) yet useful jQuery plugin that detects image loading events and triggers callback functions when all the images have been loaded (regardless of success or failure). Also supports background images and responsive images using srcset attribute.

Install the jQuery waitForImages

# NPM
$ npm install waitForImages

# Bower
$ bower install waitForImages

Basic usage:

1. Import the jquery.waitforimages.js script into your webpage which has jQuery library loaded.

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="dist/jquery.waitforimages.js"></script>

2. Execute a callback function when all the images within a given container have been loaded.

$('.container').waitForImages(function() {
  // do something
});

3. More useful options and callback functions.

$('.container').waitForImages({
  finished: function() {
    // do something
  },
  each: function() {
    // do something
  },
  waitForAll: true
});

Change logs:

2018-02-14

  • v2.4.0

2018-02-09

  • Add support for jQuery 3

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