Foundation 6 交换数据源

Question

可以使 interchange-foundation 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 或背景图像。这很好用，但我现在的问题是图像在调整大小时自动出现。

so如果Interchange使用data-src改成url，我可以取URL并粘贴到我需要的地方。

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

非常感谢！

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

Foundation 6 交换数据源

Foundation 6 Interchange data-src

javascript

zurb-foundation

interchange