javascript - 使用带有 ZURB 基础数据交换的 jquery 延迟加载插件

Question

我正在使用 ZURB 基础框架及其数据交换方法为不同的屏幕尺寸提供不同的图像进行项目。

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

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

由于延迟加载插件依赖于使用'data-original'来定义图像路径，zurb基础交换使用'data-interchange'。

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基础交换方法与延迟加载插件结合起来？

谢谢你的帮助！

输入电压

Answer 1

我现在找到的唯一解决方案是这个： Foundation Interchange + Lazy Loading

Answer 2

伙伴你可以使用http://www.appelsiini.net/projects/lazyload，对基础代码做两处修改：

// 基金.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);

并且正常使用交换，通过这种更改，延迟加载将变得神奇。