https://github.com/micc83/lazyresp
jQuery plugin to lazy load responsive images with retina support
https://github.com/micc83/lazyresp
Last synced: about 1 month ago
JSON representation
jQuery plugin to lazy load responsive images with retina support
- Host: GitHub
- URL: https://github.com/micc83/lazyresp
- Owner: micc83
- Created: 2014-11-26T13:29:22.000Z (over 11 years ago)
- Default Branch: master
- Last Pushed: 2014-12-12T15:47:09.000Z (over 11 years ago)
- Last Synced: 2026-03-27T04:09:37.374Z (3 months ago)
- Language: JavaScript
- Homepage: http://codeb.it/lazyresp/
- Size: 418 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
jQuery lazyResp
========
**lazyResp** is a jQuery plugin with a very small footprint ( *~ 0.7 Kb Gzipped* ) that handle images loading on multiple screen resolution. Check the **demo** on the [official web page](http://codeb.it/lazyresp/) of the plugin.
## How it works
Using **jQuery lazyResp** is pretty straightforward, just include the script in your page:
```html
```
Then initialize it on `$(window).load()` as follow:
```html
...
$(window).load(function() {
$('img.lazyResp').lazyResp();
});
```
Here's the script options and default values:
```javascript
$('img.lazyResp').lazyResp({
medium: 640, // Medium > 640px
large: 1024, // Large > 1024px
retina: 1.01, // Device pixel ratio to be considered retina >= 1.01
tolerance: 0, // Extend the viewport of 0px vertically and horizontally
lazy: true, // If set to false disable lazy loading
beforeLoad: function (img) {}, // Do something before the right image is loaded
afterLoad: function (img) {} // Do something after the right image is loaded
});
```
**jQuery lazyResp** provide also a `refresh()` method to check if elements are in the viewport without having to scroll the page:
```javascript
var lr = $('img.lazyResp').lazyResp();
$('a.check').click(function (e) {
e.preventDefault();
lr.refresh();
});
```
You can also target a given image setting `lazy` to false in order to load the right image size on demand, here's an example using jQuery lazyResp with **jQuery owlCarousel**:
```javascript
$(document).ready(function() {
$("#owl-demo").owlCarousel({
singleItem:true,
navigation : true,
afterInit: function () {
var $firstImage = $(this.owl.owlItems[0]).find('img');
$firstImage.lazyResp({lazy:false});
},
afterMove: function () {
var $currentImage = $(this.owl.owlItems[this.owl.currentItem]).find('img');
$currentImage.lazyResp({lazy:false});
}
});
});
```