Elegant Image Lazy Loader & Lightbox Plugin - jQuery GazeImg

GazeImg is a lightweight, elegant, full-featured images lazy loader & lightbox plugin to improve page load and image viewing experiences on the webpage.

Key Features:

• Loads images only when they appear in the viewport.
• Do not load cached images.
• Image loading error feedback.
• Displays a custom placeholder until the original image is loaded. 
• Allows you to view the image in a lightbox popup.

How to use it:

1. Insert jQuery JavaScript library and the jQuery GazeImg plugin's files into the HTML document.

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

2. Specify the path to the target image using the data-gisrc attribute:

<img data-gisrc="image-to-lazy-load.jpg" />

3. To apply a lightbox to the image, just add the data-gazeimg attribute to the img tag and the plugin will take care of the rest.

<img data-gisrc="image-to-lazy-load.jpg" data-gazeimg />

4. Display a placeholder image while loading the original image.

<img src="placeholder.gif"
     data-gisrc="image-to-lazy-load.jpg" 
     data-gazeimg 
     />

5. Re-init the plugin when new images are loaded into the document via AJAX or PJAX.

<img src="placeholder.gif"
     data-gisrc="image-to-lazy-load.jpg" 
     data-gazeimg 
     />

---

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