[SOLVED] How to re-activate Lazyload when navigating between tabs?

How to re-activate Lazyload when navigating between tabs?

I used zurb's foundation for a website which had lots of images distributed over some tabs. It was very heavy to load so I used jQuery Lazyload to solve the problem. It worked beautifully except for the fact that it only loads the images on the 1st tab, which is the one active by default. The images in other tabs only loaded upon scrolling. Even if you do it by just a tiny bit.

So how do I re-activate Lazyload when navigating between tabs?

Solution

I've tried many fixes, including the ones in Lazyload's on website. None of them worked when the content is inside tabs. But as Lazyload is triggered by scrolling I've managed to activate it by moving the page only 1px. Which is practically unnoticeable.

Here's how to do it in two simple steps...

add this javascript to the bottom of the body tag inside your html file

<script type="text/javascript">
      // FUNCTION TO SCROLL 1PX AND TRIGGER THE LAZY LOAD
      function tinyScroll() {
        window.scrollBy(0, 1);
      }
</script>

and add onclick="tinyscroll()" to your tabs. Like this example

<ul>
  <li onclick="tinyScroll()" class="tab"><a href="#"></a></li>
  <li onclick="tinyScroll()" class="tab"><a href="#"></a></li>
  <li onclick="tinyScroll()" class="tab"><a href="#"></a></li>
</ul>