与ZURB基础数据交换一起使用jquery延迟加载插件

Question

我正在使用ZURB基金会框架和它的数据交换方法来为不同屏幕大小提供不同的图像。

请参阅：http://foundation.zurb.com/docs/components/interchange.html

和：http://www.appelsiini.net/projects/lazyload

由于延迟加载插件依赖于使用“数据-原始”来定义图像路径，所以zurb基础交换使用“数据交换”。

ZURB基金会交换方法嵌入的图像如下：

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

延迟加载嵌入如下所示的图像：

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

问题：如何在惰性负载中使用‘数据交换’而不是‘数据-原始’？分别:如何将zurb基础交换方法与延迟加载插件结合起来？

谢谢你的帮忙!

Vin

Answer 1

我现在找到的唯一解决方案就是这个：基础交汇处+拉力荷载

Answer 2

Mate您可以使用http://www.appelsiini.net/projects/lazyload，对基础代码进行两个更改：

// 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);

并且正常使用交换，随着这种变化，懒惰的负载就会变魔术。