Menu icon Foundation
Lazy Interchange problem

Hi all!

I'm trying to make interchange lazy with the ScrollMagic library.

JS:

var sm_controller = new ScrollMagic.Controller();

$('.lazy').each(function (index, elem) {
    new ScrollMagic.Scene({
        triggerElement: elem,
        triggerHook: '0.8',
        reverse: false
    })
    .on('start', function () {
    	var $elem = $(elem);    	
    	$elem.foundation();    		
    })
    .addTo(sm_controller)
}); 

HTML:

<div class="lazy" data-interchange="['../img/placeholder/breather-163395.jpg', small], ['../img/placeholder/brooke-lark-175644.jpg', medium]"></div>
<div class="lazy" data-interchange="['../img/placeholder/hipster-mum-236831.jpg', small], ['../img/placeholder/jeff-sheldon-3231.jpg', medium]"></div>
<div class="lazy" data-interchange="['../img/placeholder/agency-slider01.jpg', small], ['../img/placeholder/agency-slider02.jpg', medium]"></div>

 

At first sight, it seems to work. But it does not work properly. The images are loaded when they enter the viewport. But if the viewport size changes, then the corresponding pictures are not loaded or only sometimes. Most of the time it does work for the first but for the the next two it doesn't work.

If I do this at the beginning:

$(document).foundation();

Then the corresponding pictures are loading. But then it's not lazy ;-).

 

Any idea why? Is this a bug?

Thank you for your help or inputs.

interchangescrollmagicLazy load

Hi all!

I'm trying to make interchange lazy with the ScrollMagic library.

JS:

var sm_controller = new ScrollMagic.Controller();

$('.lazy').each(function (index, elem) {
    new ScrollMagic.Scene({
        triggerElement: elem,
        triggerHook: '0.8',
        reverse: false
    })
    .on('start', function () {
    	var $elem = $(elem);    	
    	$elem.foundation();    		
    })
    .addTo(sm_controller)
}); 

HTML:

<div class="lazy" data-interchange="['../img/placeholder/breather-163395.jpg', small], ['../img/placeholder/brooke-lark-175644.jpg', medium]"></div>
<div class="lazy" data-interchange="['../img/placeholder/hipster-mum-236831.jpg', small], ['../img/placeholder/jeff-sheldon-3231.jpg', medium]"></div>
<div class="lazy" data-interchange="['../img/placeholder/agency-slider01.jpg', small], ['../img/placeholder/agency-slider02.jpg', medium]"></div>

 

At first sight, it seems to work. But it does not work properly. The images are loaded when they enter the viewport. But if the viewport size changes, then the corresponding pictures are not loaded or only sometimes. Most of the time it does work for the first but for the the next two it doesn't work.

If I do this at the beginning:

$(document).foundation();

Then the corresponding pictures are loading. But then it's not lazy ;-).

 

Any idea why? Is this a bug?

Thank you for your help or inputs.

Rafi Benkual about 2 years ago

My guess is interchange is not made to work this way. There is likely only an event on document ready to load the image based on media query.

Pavel Hristov about 2 years ago

Is it possible at all to add some kind of lazy-loading/progressive loading/blur effect together with interchange?

I tried a couple of months ago and I got a lot of errors.