Load Images After The Page Has Loaded - jQuery Postify

The Postify jQuery plugin provides an elegant way to lazy load images that load specific images after the main part of your webpage has been loaded.

The plugin provides 7 built-in showup animations for images when they're loaded and rendered in the document.

It also comes with 5 resize options which can be used to adjust the container & image size relative to each other.

How to use it:

1. Link to jQuery library and the Postify plugin's files.

<script src="/path/to/jquery.min.js"></script>
<link rel="stylesheet" href="/path/to/postify.css" />
<script src="/path/to/jquery.postify.js"></script>

2. Insert images into containers using the data-postify attribute as follows:

<div class="postify example" data-postify="1.jpg"></div>
<div class="postify example" data-postify="2.jpg"></div>
<div class="postify example" data-postify="3.jpg"></div>
...

3. Initialize the Postify plugin with default options:

$(function(){
  $('div.example').postify();
});

4. Set the animation you want to use. All possible animations:

• fade (default)
• slideUp
• slideDown
• slideLeft
• slideRight
• flip
• scale
• custom 

$('div.example').postify({
  "animation": "fade"
});

5. When you override the animation property you can define custom animation by providing an array containing at least two objects and an optional function step(now, fx). The first object describes the start and the second contains the final state. Attention: you can't animate complex, non numeric css properties. If you want to animate e.g. the transform property you have to define the first object with the initial state and the second with optional end points. The step function sets the css for each frame manual.

$('div.example').postify({
  "animation": [{opacity: 0}, {opacity: 0.5}]
});

6. Decide how should the postloaded image adjust the size itself or the size of the containing element.

• parent (default): adjust the size of the parent so it matches the size of the image. 
• cover: scale the image, that it fills the parent. 
• childHeight: force the child to adjust its height by parent. 
• childWidth: force the child to adjust its width by parent. 
• auto: auto choose

$('div.example').postify({
  "adjustSize": "parent"
});

7. Customize the image loading indicator.

$('div.example').postify({
  "showLoading": true,
  "loadingClass": "postify-loading",
  "loadingElements": "<div></div><div></div><div></div><div></div>"
});

8. More configuration options with default values.

$('div.example').postify({

  // image url to load
  "url": undefined,

  // easing function
  "easing": "ease",

  // the duration of the animation
  "duration": "slow",

  // time to wait before loading the image
  "delay": 0,

  // load images in a certain order
  "priority": 0
  
});

Changelog:

2019-09-11

• Bugfix
• Supports background images

---

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