https://github.com/nwinch/jquery-slacker

jQuery plugin for lazy loading images
https://github.com/nwinch/jquery-slacker

Last synced: 18 days ago
JSON representation

jQuery plugin for lazy loading images

• Host: GitHub
• URL: https://github.com/nwinch/jquery-slacker
• Owner: nwinch
• Created: 2012-05-14T05:51:18.000Z (over 12 years ago)
• Default Branch: master
• Last Pushed: 2012-05-23T02:00:21.000Z (over 12 years ago)
• Last Synced: 2024-03-18T12:14:21.330Z (10 months ago)
• Language: JavaScript
• Size: 119 KB
• Stars: 6
• Watchers: 2
• Forks: 1
• Open Issues: 8
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
Slacker

=============

jQuery plugin for lazy loading images.

Why?

----

There are many great lazy load plugins out there, but none seemed to capture everything that I wanted to achieve for a project at the time.  So I 

created my own - with the specific aim that it would load different size/quality images on the fly and only when required.

HTML

----

### Basic

`
`

``


### Multiple resolutions

`
`


### High quality images

You can split any resolution check into high and low quality image options.  Slacker will detect if you are using a high pixel density 

ratio (current check is for > 1).

`
`


JavaScript

----------

### Basic

`$('.slacker').slacker();`

### Multiple resolutions

`$('.slacker').slacker({

  sizes : [640]

});`

### Resize functionality

This will allow multiple resolutions to be switched on the fly when resizing the browser.

@resize - true|false; default=true; Enable/disable resize functionality.


@resizeThrottle - (millisecond); default=100; Throttle functionality will control how frequently the window resize event is fired.  Higher number is less frequent.

`$('.slacker').slacker({

	resize : true

	, resizeThrottle : 100

});`

### Animation

There are two handlers - 'beforeLoad' and 'onLoad'.

`$('.slacker').slacker({

	animate : {

		beforeLoad : function(el) {

			el.css({ opacity:0 });

		}

		, onLoad : function(el) {

			el.animate({ opacity:1 }, 1000);

		}

	}

});`