javascript - Foundation 6 交换数据源

Question

是否可以让 interchange-foundation 6 on resize 替换属性 data-src 上的路径而不是图像的 src？

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

我试图只在视口(viewport)上显示图像，某种使用交换的手动延迟加载。

我正在加载页面时删除 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','');
    });

一旦图像接触到视口(viewport)，就会添加 src 或背景图像。这运行良好，但我现在的问题是图像在调整大小时自动出现。

所以如果 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);