У меня есть галерея Flexslider, которая использует ленивую загрузку вместе с picturefill, которая работает довольно хорошо, благодаря предыдущим сообщениям от сообщества здесь.
Единственная проблема, с которой я сталкиваюсь, заключается в том, что когда я нажимаю на последнюю миниатюру моей галереи, ползунок перемещается на этот слайд, но еще ничего не загружается. Может ли кто-нибудь помочь мне с логикой здесь?
Я думаю, может быть, проверить, что на нажатом пальце есть загруженное изображение, прежде чем скользить туда, если нет, загрузите изображение и сделайте свое дело?
http://codepen.io/anon/pen/OVveXK
var mainSlide = $('#slider-main');
var navSlide = $('#slider-nav');
mainSlide.flexslider({
animation: 'slide',
controlNav: false,
animationLoop: false,
slideshow: false,
start: function (slider) {
navSlide.addClass('flex-attached');
/* lazy load first image with picturefill */
$(slider).find('.slides').children().eq(1).find('div.img span.lazy').each(function (i, elm) {
var $elm = $(elm);
var src = $elm.find('img').attr('data-src');
$elm.find('img').attr('src', src);
var content = $elm.html();
var $pic = $('<picture id="' + $elm.attr('id') + '">' + content + '</picture>');
var pic = $pic[0];
$elm.after(pic); // insert the picture
$elm.remove(); // remove the span
window.picturefill({ elements: [pic] });
});
},
after: function (slider) {
/* lazy load next image with picturefill */
$(slider).find('.slides').children().eq(slider.animatingTo + 1).find('div.img span.lazy').each(function (i, elm) {
var $elm = $(elm);
var src = $elm.find('img').attr('data-src');
$elm.find('img').attr('src', src);
var content = $elm.html();
var $pic = $('<picture id="' + $elm.attr('id') + '">' + content + '</picture>');
var pic = $pic[0];
$elm.after(pic); // insert the picture
$elm.remove(); // remove the span
window.picturefill({ elements: [pic] });
});
}
});
navSlide.flexslider({
animation: 'slide',
controlNav: false,
animationLoop: false,
slideshow: false,
asNavFor: '#slider-main',
itemWidth: 120,
itemMargin: 5,
directionNav: false,
start: function () {
navSlide.addClass('flex-attached');
}
});