Use jquery lazy load plugin with basic ZURB data exchange

Question

Im working on a project using the foundation of the ZURB framework and a data exchange method to provide different images for different screen sizes.

See: http://foundation.zurb.com/docs/components/interchange.html

and: http://www.appelsiini.net/projects/lazyload

Since the lazy-loading plugin depends on using 'data-original' to determine the image path, zurb Link Exchange uses “data exchange”.

The ZURB base interchange method addresses images as follows:

<img data-interchange="[/path/to/default.jpg, (default)], [/path/to/bigger-image.jpg, (large)]">

Lazy load addresses the images as follows:

<img class="lazy" data-original="img/example.jpg" width="640" height="480">

Question: How can I use "data exchange" instead of "data-original" in lazy loading? respectively: how can you combine the zurb database exchange method with the lazy download plugin?

Thank you for your help!

Vin

Answer 1

The only solution I found now: Exchange Foundation + lazy loading

Answer 2

Mate you can use http://www.appelsiini.net/projects/lazyload , make two changes to the base code:

//fundation.js

this.$element.attr('src', path).load(function () {
//Replace:
this.$element.attr('data-original', path).load(function () {
//and
this.$element.css({ 'background-image': 'url(' + path + ')' }).trigger(trigger);    
//Replace:
this.$element.attr('data-original', path).load(function () {_this.currentPath = path;}).trigger(trigger);

And use the exchange as usual, while this lazy load will do the magic.