Кто реализовывал Lazy Load (отложенная загрузка фото)?

InstantCMS 2.X

Поделитесь опытом!

#1 5 мая 2018 в 21:02
Всем привет! Если посты на главной странице отображать со множеством картинок и гиф, можно ли как-то реализовать Lazy Load (отложенная загрузка изображений)? Поделитесь опытом? или компонент может есть какой?
#2 5 мая 2018 в 22:08
Это решается аяксом. И двумя строчками кода не решить. Поэтому навряд ли дождётесь решения. Или закажите, или найдите решение в инете(примеров достаточно) и прикручивайте к сайту.)
#3 5 мая 2018 в 22:13
Lora
Подключить библиотеки несложно, но как фотографиям назначать нужные атрибуты и классы?
#4 5 мая 2018 в 22:23
А зачем? Подгружайте с базы по запросу по заданному кол-ву, например.
#5 5 мая 2018 в 22:33


А зачем? Подгружайте с базы по запросу по заданному кол-ву, например.

Lora
Ну вот такой плагин например http://afarkas.github.io/lazysizes/
#6 5 мая 2018 в 22:49
Особо не вникал, но вроде там у всех картинок один и тот же класс и атрибут. Так в чём проблема? Откройте файл, который выводит изображения и пропишите всё, что надо.
#7 5 мая 2018 в 22:50
Возможно и с помощью js прописать, но не знаю будет работать или нет. Хотя по идее должно.
#8 5 мая 2018 в 22:54
На досуге попробую со статьями.)
#9 5 мая 2018 в 22:58


На досуге попробую со статьями.)

Lora
А если я свой отдельный тип контента создал(со своими полями), то в какой папке мне его искать?
#10 5 мая 2018 в 23:03
Без разницы какой тип контента вы создали. Контент весь в content )) Но вы можете создать свой шаблон для вывода и в нём прописать, что надо.
#11 5 мая 2018 в 23:18


Без разницы какой тип контента вы создали. Контент весь в content )) Но вы можете создать свой шаблон для вывода и в нём прописать, что надо.

Lora
Понял, а вот если я к фото хочу класс добавить, то какой конкретно файл нужно править?
#13 5 октября 2018 в 14:12
самое простое решение, грузит потом или когда пользователь смотрит у фото вместо src должен быть data-src

  1. <img data-src="фотка.jpg">
  1. [].forEach.call(document.querySelectorAll('img[data-src].load'), function(img) {
  2. img.setAttribute('src', img.getAttribute('data-src'));
  3. img.onload = function() {img.removeAttribute('data-src');};});
Вы не можете отвечать в этой теме.
Войдите или зарегистрируйтесь, чтобы писать на форуме.

Похожие темы

Используя этот сайт, вы соглашаетесь с тем, что мы используем файлы cookie.