Simple (Background) Image Loader Plugin With jQuery And CSS3 - loadImages.js

loadImages.js is a simple, lightweight jQuery plugin which displays a CSS3 based animated loader to indicate the image is loading and you have to still wait. Also supports background images. The plugin automatically generates a loading element appending to your image's container (its parent) while the image is downloading.

How to use it:

1. Put jQuery library and the jQuery loadImages.js script at the bottom of the html page.

<script src="//code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="build/js/loadImages.js"></script>

2. Call the function on the img tag and done.

$('img').loadImages();

3. Style the loading element in the CSS as follows:

.loading-img, .loading-img .box {
  position: absolute;
  left: 0;
  top: 0
}

.loading-img {
  background: #ddd;
  display: inline-block;
  width: 100%;
  height: 100%;
  z-index: 2
}

.loading-img .box {
  width: 78x;
  height: 78px;
  right: 0;
  bottom: 0;
  margin: auto
}

.loading-img .loading:after, .loading-img .loading:before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 50%
}

.loading-img .loading:before {
  width: 35px;
  height: 35px;
  margin-top: -18px;
  margin-left: -18px;
  border-width: 2px 1px;
  border-style: solid;
  border-color: #000 rgba(0,0,0,.3);
  -webkit-animation: spin 3.45s infinite;
  -moz-animation: spin 3.45s infinite;
  -o-animation: spin 3.45s infinite;
  animation: spin 3.45s infinite
}

.loading-img .loading:after {
  width: 6px;
  height: 6px;
  margin-top: -3px;
  margin-left: -3px;
  background-color: #000;
  -webkit-animation: pulse 6.9s infinite, borderPulse 6.9s infinite;
  -moz-animation: pulse 6.9s infinite, borderPulse 6.9s infinite;
  -o-animation: pulse 6.9s infinite, borderPulse 6.9s infinite;
  animation: pulse 6.9s infinite, borderPulse 6.9s infinite
}

@-webkit-keyframes 
spin { 0% {
transform:rotate(0)
}
50% {
transform:rotate(360deg)
}
100% {
transform:rotate(1080deg)
}
}
@-moz-keyframes 
spin { 0% {
transform:rotate(0)
}
50% {
transform:rotate(360deg)
}
100% {
transform:rotate(1080deg)
}
}
@-o-keyframes 
spin { 0% {
transform:rotate(0)
}
50% {
transform:rotate(360deg)
}
100% {
transform:rotate(1080deg)
}
}
@keyframes 
spin { 0% {
transform:rotate(0)
}
50% {
transform:rotate(360deg)
}
100% {
transform:rotate(1080deg)
}
}
@-webkit-keyframes 
pulse { 0%, 13%, 30%, 43%, 74% {
background-color:rgba(0,0,0,.2)
}
100%, 15%, 28%, 45%, 70% {
background-color:rgba(0,0,0,.9)
}
}
@-moz-keyframes 
pulse { 0%, 13%, 30%, 43%, 74% {
background-color:rgba(0,0,0,.2)
}
100%, 15%, 28%, 45%, 70% {
background-color:rgba(0,0,0,.9)
}
}
@-o-keyframes 
pulse { 0%, 13%, 30%, 43%, 74% {
background-color:rgba(0,0,0,.2)
}
100%, 15%, 28%, 45%, 70% {
background-color:rgba(0,0,0,.9)
}
}
@keyframes 
pulse { 0%, 13%, 30%, 43%, 74% {
background-color:rgba(0,0,0,.2)
}
100%, 15%, 28%, 45%, 70% {
background-color:rgba(0,0,0,.9)
}
}
@-webkit-keyframes 
borderPulse { 0% {
box-shadow:0 0 0 0 #000, 0 0 0 1px rgba(0,0,0,.8)
}
40% {
box-shadow:0 0 0 1px #000, 0 0 0 2px rgba(221,187,0,.8)
}
80% {
box-shadow:0 0 0 3px #FFF, 0 0 1px 3px rgba(221,187,0,.8)
}
}
@-moz-keyframes 
borderPulse { 0% {
box-shadow:0 0 0 0 #000, 0 0 0 1px rgba(0,0,0,.8)
}
40% {
box-shadow:0 0 0 1px #000, 0 0 0 2px rgba(221,187,0,.8)
}
80% {
box-shadow:0 0 0 3px #FFF, 0 0 1px 3px rgba(221,187,0,.8)
}
}
@-o-keyframes 
borderPulse { 0% {
box-shadow:0 0 0 0 #000, 0 0 0 1px rgba(0,0,0,.8)
}
40% {
box-shadow:0 0 0 1px #000, 0 0 0 2px rgba(221,187,0,.8)
}
80% {
box-shadow:0 0 0 3px #FFF, 0 0 1px 3px rgba(221,187,0,.8)
}
}
@keyframes 
borderPulse { 0% {
box-shadow:0 0 0 0 #000, 0 0 0 1px rgba(0,0,0,.8)
}
40% {
box-shadow:0 0 0 1px #000, 0 0 0 2px rgba(221,187,0,.8)
}
80% {
box-shadow:0 0 0 3px #FFF, 0 0 1px 3px rgba(221,187,0,.8)
}
}

4. Displays a loading indicator over a specific element containing a background image.

$('#background > div').loadImages();

<div id="background">
  <div style=" background: url(bg.jpg)"></div>
</div>

5. Execute a callback function when some image are loaded.

$('img').loadImages({
  callback : function(){
    // do something
  }
});

6. Customize the loading element.

$('img').loadImages({
  template: "<div class='loading'>"+"</div>"
});

---

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