Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 18.07.2017, 22:58
Аватар для Nezumi.May
Аспирант
Отправить личное сообщение для Nezumi.May Посмотреть профиль Найти все сообщения от Nezumi.May
 
Регистрация: 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. Спасибо.
Ответить с цитированием
  #2 (permalink)  
Старый 19.07.2017, 05:28
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,989

У вас построчная навигация получает данные асинхронным запросом, а значит данные комментариев следующих за первой страниц на страницу добавляются динамически, и действие плагина lazy load на них не распространяется. Нужно в Ajax запросе навигатора, после получения данных заново инициализировать lazy load.
Ответить с цитированием
  #3 (permalink)  
Старый 19.07.2017, 07:01
Профессор
Отправить личное сообщение для Rise Посмотреть профиль Найти все сообщения от Rise
 
Регистрация: 07.11.2013
Сообщений: 458

Nezumi.May,
Заново инициализировать можно так:
$(document).ajaxStop(function() {
    $('img.lazy').lazyload();
});
Ответить с цитированием
  #4 (permalink)  
Старый 19.07.2017, 14:08
Аватар для Nezumi.May
Аспирант
Отправить личное сообщение для Nezumi.May Посмотреть профиль Найти все сообщения от Nezumi.May
 
Регистрация: 10.01.2017
Сообщений: 36

laimas, Rise,
Большое спасибо! Никак не могла найти эту штуку.
Ответить с цитированием
  #5 (permalink)  
Старый 19.07.2017, 14:28
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,989

Nezumi.May,
все таки не стоит для инициализации использовать .ajaxStop(). Методы .ajaxStart() и .ajaxStop() глобальные, обработчики которых можно определить так:

$(document).on({
    ajaxStart: ....., //имя функции или функция, которая например запускает лоадер, которых может быть множество 
    ajaxStop: ......//имя функции или функция, которая например останавливает лоадер, которых может быть множество
});


В общем какие-то глобальные задачи. А обработчики для конкретной задачи лучше вместе прописать, чтобы не рыскать по коду.

Хотя конечно работать будет и так.

Последний раз редактировалось laimas, 19.07.2017 в 14:34.
Ответить с цитированием
  #6 (permalink)  
Старый 19.07.2017, 19:25
Аватар для Nezumi.May
Аспирант
Отправить личное сообщение для Nezumi.May Посмотреть профиль Найти все сообщения от Nezumi.May
 
Регистрация: 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();
});

 
});


Чтобы эта самая инициализация была нужно нажать на переключалку комментариев. Я так понимаю, сделала я не столь правильно, сколь могло быть?
Ответить с цитированием
  #7 (permalink)  
Старый 02.10.2017, 16:56
Аватар для Nezumi.May
Аспирант
Отправить личное сообщение для Nezumi.May Посмотреть профиль Найти все сообщения от Nezumi.May
 
Регистрация: 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"
	});
});
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Быстрая и синхронная подгрузка картинок. Mike_Kharkov (X)HTML/CSS 38 26.07.2013 21:28
Подгрузка картинок при скроллинге Александр141 Серверные языки и технологии 1 15.05.2013 18:36
подгрузка картинок land15 Элементы интерфейса 3 08.09.2012 23:01
Пропорциональное уменьшение размеров картинок (делаем тамбнейлы), не работает adelante Элементы интерфейса 4 28.11.2010 09:44
Прелоуд картинок не работает в Опере Arseo Opera, Safari и др. 3 20.11.2009 19:45