This time I will share jQuery Plugin and tutorial about Elegant Image Lazy Loader & Lightbox Plugin – jQuery GazeImg, hope it will help you in programming stack.
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.
1 |
<link rel="stylesheet" href="/path/to/lib/css/gazeimg.css" /> |
2 |
<script src="/path/to/cdn/jquery.min.js"></script> |
3 |
<script src="/path/to/lib/js/gazeimg.js"></script |
2. Specify the path to the target image using the data-gisrc attribute:
1 |
<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.
1 |
<img data-gisrc="image-to-lazy-load.jpg" data-gazeimg /> |
4. Display a placeholder image while loading the original image.
1 |
<img src="placeholder.gif" |
2 |
data-gisrc="image-to-lazy-load.jpg" |
5. Re-init the plugin when new images are loaded into the document via AJAX or PJAX.
1 |
<img src="placeholder.gif" |
2 |
data-gisrc="image-to-lazy-load.jpg" |
This awesome jQuery plugin is developed by ganxiaozhe. For more Advanced Usages, please check the demo page or visit the official website.
