Я пытаюсь получить ленивую загрузку для Flexslider с помощью плагина lazy Loading jquery и следуя инструкциям на этом сайте: http://www.appelsiini.net/projects/lazyload
Я загружаю плагин script и не вижу ошибок на консоли. Я пробовал без контейнера или опций, передаваемых в функции lazyload, и до сих пор ничего. Я трачу часы на это.
$("img.lazy").lazyload({
effect: "fadeIn",
container: $(".slides > li")
});
Кто-нибудь знает, как получить ленивую загрузку в Flexslider?
Итак, я добавил реальную страницу изображения к атрибуту data-attr в теге изображения и в пожаре событий after Я нашел бы изображение с классом active и установил атрибут img src равным значению data-attr.
Я выполнял ленивую загрузку во время прокрутки. Это решение работает лучше для больших коллекций по сравнению с другими предлагаемыми здесь решениями. Во время инициализации он загружает только первые 5 изображений, а затем загружает 3 изображения для каждой анимации.
<li>
<img class="lazy" src="loading-image.jpg" data-src="actual-image.jpg" />
</li>
и код javascript:
$('.flexslider').flexslider({
animation: "slide",
animationLoop: false,
controlNav: false,
init: function (slider) {
// lazy load
$("img.lazy").slice(0,5).each(function () {
var src = $(this).attr("data-src");
$(this).attr("src", src).removeAttr("data-src").removeClass("lazy");
});
},
before: function (slider) {
// lazy load
$("img.lazy").slice(0,3).each(function () {
var src = $(this).attr("data-src");
$(this).attr("src", src).removeAttr("data-src").removeClass("lazy");
});
}
});
Метод работает очень хорошо для меня, но загружаемое изображение должно быть того же размера, что и остальные изображения. Я действительно использую http://imageresizing.net/ с помощью mode = pad
В основном контейнере, который вы используете для flexslider, поместите фактическое изображение в атрибут "data-src"
<li>
<img class="lazy" src="loading-image.jpg" data-src="actual-image.jpg" />
</li>
В функции инициализации используйте обратный вызов "start", чтобы заменить загружаемое изображение фактическим изображением и удалить атрибут
$('#slider').flexslider({
start: function (slider) {
// lazy load
$(slider).find("img.lazy").each(function () {
var src = $(this).attr("data-src");
$(this).attr("src", src).removeAttr("data-src");
});
}
});
Надеюсь, это поможет кому-то.
Я пытаюсь сделать то же самое, используя Flexslider 2 и Lazy Load Plugin для jQuery.
Кажется, что свойство container работает только в том случае, если элемент имеет стиль overflow:scroll;
Мне удалось получить ленивую нагрузку, используя этот код:
$("#flexcontainer img.lazy").lazyload({
failure_limit : 10,
effect: "fadeIn",
skip_invisible : false
});
Однако, это просто ленивые нагрузки все сразу, а не как анимация flexslider.
Мне также удалось заставить его работать с мышью над этим кодом:
$("#flexcontainer img.lazy").lazyload({
failure_limit : 10,
effect: "fadeIn",
event : "mouseover"
});
Однако это не работает на сенсорных устройствах.
Я думаю, что ключ заключается в создании собственного пользовательского события и его срабатывании после обратного вызова flexslider, такого как обратный вызов after.
Для того, чтобы предложить альтернативное решение - еще один вариант - использовать чувствительный слайдер, который уже имеет ленивую загрузку, встроенную в него, например королевский слайдер, вот ссылка → http://dimsemenov.com/plugins/royal-slider/
Вы также можете инициализировать lazyload с помощью настраиваемого события триггера...
$jQ("img[data-original]").lazyload({
effect: "fadeIn",
skip_invisible: false,
event: "forceLazyLoad"
});
... и затем вызовите это событие, чтобы предварительно загрузить все ваши изображения внутри flexslider с помощью вызова типа:
$jQ('.flex-viewport').find('img[data-original]').trigger('forceLazyLoad');