Trigger An Event After All Images Are Loaded - imagesloaded.js

imagesloaded.js is a jQuery plugin that allows you to run code after all images (and/or background images) in DOM have been loaded successfully.

A typical use case of the plugin is to delay the rendering of an image slider or slideshow until all images are loading.

How to use it:

1. Insert the JavaScript file jquery.imagesloaded.js after loading jQuery.

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/jquery.imagesloaded.js"></script>

2. The plugin supports both img tag and background images.

<h2>Image</h2>
<img src="https://source.unsplash.com/16rU0VGwYWQ/1200x600" />

<h2>Background Image</h2>
<div class="box">
  Image Loaded!
</div>

.box { 
  height: 600px; 
  background-image: url(https://source.unsplash.com/DnWCpjQ_CbU/1200x700); 
  background-position: 50% 50%; 
  background-size: cover; 
};

3. Execute a function when the all-images-loaded is triggered.

$(document).on('all-images-loaded',function(){
  alert('All Images Are Loaded')
})

---

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