Foundation 6 交换数据-src答案

【问题标题】：Foundation 6 Interchange data-srcFoundation 6 交换数据-src
【发布时间】：2016-11-03 16:16:19
【问题描述】：

是否可以在调整大小时使交换基础 6 替换属性 data-src 上的路径，而不是图像的 src？

在 DIV 中的背景图像上具有相同的行为，将 data-src 上的路径替换为 style="background-image。

我正在尝试仅在视口上显示图像，这是使用交换的某种手动延迟加载。

页面加载时我正在删除 src：

/*Stop Interchange Background Images loading images*/

    $(".delay").each(function(){
        var img_src = $(this).attr('src');
        $(this).attr("data-src", img_src);
        $(this).attr('src', '');
    });

/*Stop Interchange Background Images loading for DIVs and Slides*/

    $(".backImg").each(function(){
        var img_backImg = $(this).css('background-image');
        $(this).attr("data-src", img_backImg);
        $(this).css('background-image','');
    });

然后，一旦图像接触视口，就会添加 src 或背景图像。这很好用，但我现在的问题是图像在调整大小时会自动出现。

所以如果 Interchange 使用 data-src 来更改 url，我可以将 URL 粘贴到我需要的地方。

希望这对可以帮助我的人有意义。

非常感谢！

【问题讨论】：

标签： javascript zurb-foundation interchange

【解决方案1】：

回答我自己的问题：

我发现了一种不美观的方法，但效果很好：

编辑foundation.js文件：

第 6253 行：

this.$element.attr('src', path).load(function () {

替换：

this.$element.attr('data-original', path).load(function () {

第 6259 行（用于背景图像）：

this.$element.css({ 'background-image': 'url(' + path + ')' }).trigger(trigger);

替换：

this.$element.attr('data-original', path).load(function () {
            _this.currentPath = path;
          }).trigger(trigger);

【讨论】：