Question

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

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

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

由于延迟加载插件依赖于使用＆data; data-original＆＃39;定义图像路径， zurb基础交换使用＆＃39;数据交换＆＃39;。

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">

问题： 我如何使用＆＃39;数据交换＆＃39;而不是数据原创＆＃39;在懒惰负载？分别：如何将zurb基础交换方法与延迟加载插件结合起来？

感谢您的帮助！

Vin

Answer 1

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

Answer 2

你可以使用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);

并且通常使用交换，通过这种改变，懒惰的负载将成为魔术。

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

2 个答案: