logo

Foundation Interchange plus jQuery Unveil to achieve Responsive Lazy Loading

Hello all,
Foundation could be awesome for a lot of things, i love this framework, but still not everything is perfect.
For instance it could happen that we want to use jQuery Unveil for instance and at the same time Foundation Interchange for the maximum awesomeness!
Still it’s clear that they could not fit together plus foundation has stated that there is no lazy interchange at the moment… so let’s do it 🙂


Instead of the same old data-interchange put a data-lazy for instance:

<!-- OLD -->
<img data-interchange="[../images/small.png, (small)], [../images/medium.png, (medium)], [../images/large.png, (large)]">
<!-- NEW -->
<img data-src="path/to/a/blank.gif" data-lazy="[../images/small.png, (small)], [../images/medium.png, (medium)], [../images/large.png, (large)]">

Then add this function:

(function($) {
    $.fn.lazyInterchange = function() {
      var selectors = this.each(function() {
        if($(this).attr('data-lazy')){
          $(this).attr('data-interchange',$(this).attr('data-lazy'));
          $(this).removeAttr('data-lazy');
          $(this).foundation('interchange', 'reflow');
        }
      });
      return selectors;
    };
}(jQuery));

and then launch it when you need it, maybe on next slide for a big slideshow or on scroll down for a pictures wall:

$('img').lazyInterchange();

Since we started introducing jQuery unveil as our case for lazy loading activation we can proceed integrating our code as it follows:

// call our unveil and then our lazyInterchange 
$('img').unveil(200,function(){
    $(this).load(function(){
        $(this).lazyInterchange();
    });
});

and that's it for our case.

IMPORTANT NOTE FOR FOUNDATION 6 USERS!

$(this).foundation(‘interchange’, ‘reflow’); has to be used with Foundation 5.
In Foundation 6 use $(this).foundation();. This is the new way Foundation 6 does actually reflows elements.

thx Alex Laforge

i've added a live demo url to avoid bad practices and confusion: click here to see the demo. With minor adaptations you can make it work with other lazy loader and even your custom code.

2014/04/19
POSTED BY
CATEGORY
COMMENTS19 comments

  1. Hi,
    Thanks for your useful article. I have a question, why don’t use only

    $(document).foundation(‘interchange’, ‘reflow’);

    instead of both of them:
    $(document).foundation(‘reflow’);
    $(document).foundation(‘interchange’, ‘reflow’);

    • I admit that the first reflow is unnecessary in most cases. I put it there probably because in my specific case i add the images inside another foundation widget and i need to reflow it before and interchange again.
      You can remove it if you don’t find any different behaviour. Reflow is not the “lightest” solution foundation offers therefore should be avoided when possible 🙂

  2. Another question, I can’t understand when call unveil() function?
    $(“img”).unveil();

    Can you help me?

    • At first try like their website suggest:

      $(document).ready(function() {
      $(“img”).unveil();
      });

      I think one call is enough, if it doesn’t work like this try to put a $(selector).unveil() inside the lazyInterchange function.

      I admit that i should probably provide a demo for this code. 😛

      • Thanks,
        When call lazyInterchange(‘#my_element’); ?

        • i’ve added a live demo in the article, with some minor corrections to the code.
          now it should satify your needs 🙂

  3. Hello, excellent article.

    Just a question, I’m having a problem with some pictures that are not loading until I resize the browser.
    do you have an idea what may produce that problem?

    thank you and thank you for the information, very, very useful!!!

    • I’m using.
      * fullPage 2.6.4
      * https://github.com/alvarotrigo/fullPage.js

      And the problem stars with the option:
      scrollBar: true,

      looks like some kind of incompatibility loading the interchange pictures, because without using interchange (charging images normally with lazy load) there is not any problem.
      Any ideas? Thank you!

      • Yep, i have an idea: if the problem is solved on the resize of the window… then why not triggering it manually?
        I am talking about launching a $(window).trigger(‘resize’); when the plugin is loaded and the window is ready. Something like this example: http://jsfiddle.net/stuttufu/z5akfLq3/1/
        Try to un-comment the $(window).trigger(‘resize’) part. It’s similar to your problem, on load you need a resize to be trigger.

        Anyway i had the same problem a lot of time with many slider plugins, they fail the moment when calculate the global height based on the slides because the images are still missing but after the images are loaded with a resize of the window the slider re-trigger its “render” function and the slider is rendered correctly.

        My suggestions is just a workaround, but it can work. 🙂

  4. Hi,
    Thanks for this useful, very useful article! I haven’t got it working though..

    It seems that this piece of code (line 34 of jquery.unveil.js) is evaluating true on each image. if ($e.is(“:hidden”)) return;
    Therefore non image is loaded.

    Any idea?

    Thanks in advance,

    • I guess it’s a version thing. I’m using the latest version of Foundation, Jquery and Unveil.. Using your versions just works. Strange isn’t it!

    • joerg
    • October 29th, 2015

    this is great!
    can we use this also on Interchange Background Images ? I don’t get this to run.

    • Aww I don’t think Interchange works with bg images.
      Anyway you can simulate his behaviour with javascript manually. (detect window size, get data-interchange value, convert the value to object, apply to the item the style “background-image” with url equal to the object value corresponding for that window size. add a watcher for window size change.)

    • joerg
    • November 2nd, 2015

    Jonathan Argentiero :
    Aww I don’t think Interchange works with bg images.

    Jonathan – it does! like …

    see source: http://foundation.zurb.com/docs/components/interchange.html

    maybe you could update your script to solve this way also.

    • Tobias Malikowski
    • December 7th, 2015

    Hi Jonathan and thanks for your usefull article.

    However I can’t get this to work. I’m trying to get this working with the popular Slick-Slider. The slider by itself has a build in lazyLoading if “data-lazy” is set and the src is let off. (http://kenwheeler.github.io/slick/)

    I always get this error message: “Uncaught ReferenceError: We’re sorry, ‘interchange’ is not an available method for this element.” which comes from “$(this).foundation(‘interchange’, ‘reflow’);” Do you have any idea whats wrong? Btw. I’m using Foundation 6.

    HTML (matches your code):

    JS (matches your code):

    $(document).ready(function(){
  (function($) {
    console.log('here1');
    $.fn.lazyInterchange = function() {
      var selectors = this.each(function() {
        if($(this).attr('data-lazy')){
          $(this).attr('data-interchange', $(this).attr('data-lazy'));
          $(this).removeAttr('data-lazy');
          $(this).foundation('interchange', 'reflow');
        }
      });
      console.log(selectors);
      return selectors;
    };
  }(jQuery));

  $('img').lazyInterchange();
});

    Thanks for your help.

      • ALex Laforge
      • August 2nd, 2016

      Hi @Tobias Malikowski,
      The reason why you get the “Uncaught ReferenceError” is because “$(this).foundation(‘interchange’, ‘reflow’);” has to be used with Foundation 5.
      I’m using Foundation 6, and I have changed this line with “$(this).foundation();”. That is the new way Foundaiton 6 does actually reflows elements.
      This single line change solved the problem, and the code is working like a charm.
      Hope it will help everyone wondering 😉
      Alex

      I always get this error message: “Uncaught ReferenceError: We’re sorry, ‘interchange’ is not an available method for this element.” which comes from “$(this).foundation(‘interchange’, ‘reflow’);” Do you have any idea whats wrong? Btw. I’m using Foundation 6.

      $(this).foundation(‘interchange’, ‘reflow’);

    • Robert Starkt
    • October 16th, 2016

    Hi Jonathan,

    Thanks – however the demo link seems to have expired:

    http://35.185.94.59/examples/lazyresponsivefoundation.html

    I just want to see it in action before implementing.

  1. No trackbacks yet.

 
Bitnami