基础6交换数据

Foundation 6 Interchange data-src

本文关键字：数据 交换 基础      更新时间：2023-09-26

这是可能的，使交换基础6在调整大小取代的路径上的属性data-src而不是src的图像?

对于DIV中的背景图像也是如此，将data-src上的path替换为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粘贴到我需要的地方。

希望对能帮助我的人有意义。

非常感谢!

回答我自己的问题:

我发现了一个不漂亮的方法，但效果很好:

编辑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);

Rempace: 

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