Search code examples
javascriptzurb-foundationinterchange

Foundation 6 Interchange data-src

it's possible make that interchange-foundation 6 on resize replace the path on the attribute data-src instead the src of an image?

And same behavior on a background image in a DIV, replace path on data-src instead the style="background-image.

I'm trying to show images only on viewport, some kind of manual lazy load using interchange.

I'm deleting the src when page is loading:

/*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','');
    });

Then the src or background image is added once the image touch the viewport. This is working well but my problem now is that the image is appearing automatically on resize.

so If Interchange use data-src to change the url, I can take the URL and paste it where I need.

Hope that make sense for someone that can help me.

Thank you very much!

Solution

  • Answer to my own question:

    I found a non beautiful way to do it but works perfectly fine:

    editing the foundation.js file:

    Line 6253:

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

    Replace:

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

    Line 6259 (for background images): 

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

    Rempace:

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