Skip to content

Instantly share code, notes, and snippets.

@AllThingsSmitty
Created February 1, 2015 03:45
Show Gist options
  • Save AllThingsSmitty/059884d0b1afe83b58b9 to your computer and use it in GitHub Desktop.
Save AllThingsSmitty/059884d0b1afe83b58b9 to your computer and use it in GitHub Desktop.
Lazy loading images for FlexSlider
<section class="slider">
<div class="flexslider">
<ul class="slides">
<li><img src="http://imgur.com/..." alt=""></li>
<li><img class="lazy" data-src="http://imgur.com/..." alt=""></li>
<li><img class="lazy" data-src="http://imgur.com/..." alt=""></li>
<li><img class="lazy" data-src="http://imgur.com/..." alt=""></li>
<li><img class="lazy" data-src="http://imgur.com/..." alt=""></li>
</ul>
</div>
</section>
<script src="jquery.flexslider.min.js"></script>
'use strict';
$(window).load(function () {
$('.flexslider').flexslider({
touch: true,
slideshow: false,
controlNav: true,
slideshowSpeed: 7000,
animationSpeed: 600,
initDelay: 0,
start: function(slider) { // fires when the slider loads the first slide
var slide_count = slider.count - 1;
$(slider)
.find('img.lazy:eq(0)')
.each(function() {
var src = $(this).attr('data-src');
$(this).attr('src', src).removeAttr('data-src');
});
},
before: function (slider) { // fires asynchronously with each slider animation
var slides = slider.slides,
index = slider.animatingTo,
$slide = $(slides[index]),
$img = $slide.find('img[data-src]'),
current = index,
nxt_slide = current + 1,
prev_slide = current - 1;
$slide
.parent()
.find('img.lazy:eq(' + current + '), img.lazy:eq(' + prev_slide + '), img.lazy:eq(' + nxt_slide + ')')
.each(function () {
var src = $(this).attr('data-src');
$(this).attr('src', src).removeAttr('data-src');
});
}
});
});
@dinonondi
Copy link

That's cool ! The only issue is that there is a glitch when first sliding, the image which are lazy loaded are flickering..

@dinonondi
Copy link

And when clicking on previous, the image turns white, and it bugs :(

@Katrienvh
Copy link

And when clicking on previous, the image turns white, and it bugs :(

Dirty fix is to give each slide a min height op 1px

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment