18.07.2017, 22:58
|
|
Аспирант
|
|
Регистрация: 10.01.2017
Сообщений: 36
|
|
Подгрузка картинок с lazy load не работает
Доброго вечера. Помогите решить одну проблемку.
У меня на сайте блок комментариев переключается с помощью ajax. На аватарах стоит "ленивая загрузка изображений" и всё работает как надо, за исключением этой самой переключалки. На второй странице комментариев lazy load уже не работает и аватары не отображаются.
ссылка на сайт, переключалка комментариев в самом низу
Пыталась сделать так, чтобы при нажатии на ссылку-навигацию комментариев аватарам присваивались адреса из data-original в src, но ничего не вышло :с
$('body').on('click','a.swchItem',function()
{
$('html,body').animate({scrollTop: $('.com-order-block').offset().top},500);
$('img.ava').load(function()
{
$("img.lazy").each(function()
{
$(this).attr("src",$(this).attr("data-original"));
});
});
});
Было бы прекрасно, помоги вы мне понять, как сделать lazy load для подгружаемых картинок или хотя бы присвоить им src вместо data-original. Спасибо.
|
|
19.07.2017, 05:28
|
Профессор
|
|
Регистрация: 14.01.2015
Сообщений: 12,990
|
|
У вас построчная навигация получает данные асинхронным запросом, а значит данные комментариев следующих за первой страниц на страницу добавляются динамически, и действие плагина lazy load на них не распространяется. Нужно в Ajax запросе навигатора, после получения данных заново инициализировать lazy load.
|
|
19.07.2017, 07:01
|
Профессор
|
|
Регистрация: 07.11.2013
Сообщений: 4,662
|
|
Nezumi.May,
Заново инициализировать можно так:
$(document).ajaxStop(function() {
$('img.lazy').lazyload();
});
|
|
19.07.2017, 14:08
|
|
Аспирант
|
|
Регистрация: 10.01.2017
Сообщений: 36
|
|
laimas, Rise,
Большое спасибо! Никак не могла найти эту штуку.
|
|
19.07.2017, 14:28
|
Профессор
|
|
Регистрация: 14.01.2015
Сообщений: 12,990
|
|
Nezumi.May,
все таки не стоит для инициализации использовать .ajaxStop(). Методы .ajaxStart() и .ajaxStop() глобальные, обработчики которых можно определить так:
$(document).on({
ajaxStart: ....., //имя функции или функция, которая например запускает лоадер, которых может быть множество
ajaxStop: ......//имя функции или функция, которая например останавливает лоадер, которых может быть множество
});
В общем какие-то глобальные задачи. А обработчики для конкретной задачи лучше вместе прописать, чтобы не рыскать по коду.
Хотя конечно работать будет и так.
Последний раз редактировалось laimas, 19.07.2017 в 14:34.
|
|
19.07.2017, 19:25
|
|
Аспирант
|
|
Регистрация: 10.01.2017
Сообщений: 36
|
|
laimas, Я сделала так:
$('body').on('click','a.swchItem',function(){
$('html,body').animate({scrollTop: $('.com-order-block').offset().top},500);
$(document).ajaxStop(function() {
$('img.lazy').lazyload();
});
});
Чтобы эта самая инициализация была нужно нажать на переключалку комментариев. Я так понимаю, сделала я не столь правильно, сколь могло быть?
|
|
19.07.2017, 22:16
|
Профессор
|
|
Регистрация: 07.11.2013
Сообщений: 4,662
|
|
Nezumi.May,
Неправильно, должно быть отдельно, а так у тебя с каждым кликом лишний обработчик добавляется.
$("img.lazy").show().lazyload({
effect: "fadeIn"
});
$('body').on('click', 'a.swchItem', function () {
$('html,body').animate({
scrollTop: $('.com-order-block').offset().top
}, 500);
});
$(document).ajaxStop(function () {
$('img.lazy').lazyload({
effect: "fadeIn"
});
});
|
|
02.10.2017, 16:56
|
|
Аспирант
|
|
Регистрация: 10.01.2017
Сообщений: 36
|
|
Можете подсказать, почему не получается подгрузить lazyload.
Ссылка на страницу: тык
В самом низу кнопка подгрузки материалов. Материалы выводятся, но изображения не отображаются, только серый фон. Как мне вывести изображения?
Код кнопки:
<input value="Показать ещё материалы" id="eweanime" type="submit"><div id="aponbs"></div>
Скрипт подгрузки:
$('body').on('click', 'input#eweanime', function () {
$(this).remove();
var apons = 12;
for(i=7;i<apons+1;i++) {
$('#aponbs').append('<div id="apods' + i + '"></div>');
$('div[id="apods' + i + '"]').load('/board/0-'+i+'-10265-0-17 #apobd');
};
});
$(document).ajaxStop(function () {
$('img.lazy').lazyload({
effect: "fadeIn"
});
});
|
|
|
|