Delay Image Loading To Prevent Rate Limiting - lazyrate.js

lazyrate.js is a jQuery plugin that provides a unique way to delay the loading of a series of images within the document. Can be used to prevent rate limiting issues caused by images that load too fast.

When the first image in the sequence has been loaded, the plugin applies a delay to the subsequent image loading process, during which the browser waits for a specified period of time before starting to load the next image.

How to use it:

1. Place the jquery.lazyrate.js script after loading jQuery (slim build is recommended).

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

2. Add placeholder images to the page and specify the real path of your images using the data-src attribute. Note that each image must have a unique ID as follows:

<img id="img01" 
     data-src="1.jpg" 
     src="placeholder.png" 
     class="lazyrate" />
<img id="img02" 
     data-src="2.jpg" 
     src="placeholder.png" 
     class="lazyrate" />
<img id="img03" 
     data-src="3.jpg" 
     src="placeholder.png" 
     class="lazyrate" />
<img id="img04" 
     data-src="4.jpg" 
     src="placeholder.png" 
     class="lazyrate" />
<img id="img05" 
     data-src="5.jpg" 
     src="placeholder.png" 
     class="lazyrate" />

3. Call the function on the images and determine the delay in milliseconds. Default: 200ms.

$(document).ready(function () {
  $(".lazyrate").lazyRate({
    delay: 1000
  });
});

---

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