Elegant Image Lazy Loader & Lightbox Plugin - jQuery GazeImg
File Size: | 23.2 KB |
---|---|
Views Total: | 1574 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

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.