Как сделать ленивую подгрузку картинок ?

Автор Тема: Как сделать ленивую подгрузку картинок ?  (Прочитано 2966 раз)

Оффлайн DogicaАвтор темы

  • Бизнес оценка: (0)
  • Ветеран
  • *****
  • СПАСИБО: 441
  • Сообщений: 1314
  • Карма: 36
  • Пол: Мужской
  • www.dogica.com
  • Награды SEO-специалист
    • Просмотр профиля
    • DOGICA

Оффлайн DogicaАвтор темы

  • Ветеран
  • *****
  • Доп. информация
    • Бизнес оценка: (0)
    • СПАСИБО: 441
    • Сообщений: 1314
    • Карма: 36
    • Пол: Мужской
    • www.dogica.com
    • Награды SEO-специалист
      • Просмотр профиля
      • DOGICA
Хочу сделать "ленивую подгрузку изображений".. что подразумевает - те изображения на страничке которые не находятся в поле зрения посетителя в данный момент, не подгружаются.. что то вроде динамической подгрузки картинок по мере прокрутки страничек

эффект - ускоряет загрузку страничек

дело осложняется не трудностями поиска в гугле, а тысячами картинок на различных 200+ страничках сайта
не очень хочется искать их код и дописывать классы.. знаю что можно с Javascriptom пошалить..
может быть кто то задавался подобной затеей и имеет код?
DOGICA® 3D World of Dog & Puppy
HTTP://WWW.DOGICA.COM  ;)


Оффлайн ProtectYourSite

  • Бизнес оценка: (3, 100%)
  • Ветеран
  • *****
  • СПАСИБО: 253
  • Сообщений: 616
  • Карма: 3
    • Просмотр профиля
    • Удаление вирусов на сайте с гарантией

Оффлайн ProtectYourSite

  • Ветеран
  • *****
Мне кажется, что с реализацией выйдут проблемы.
Допустим, что мы можем при загрузке указать всем изображениям display:none (по идее при этом изображения не должны загружаться)
Однако дальше обстоит проблема с высчитыванием видимости или невидимости того или иного элемента:
- во-первых, если использовать координаты, то различия в браузерах будут давать разные результаты в зависимости от всяких отступов, границ и прочих нюансов
- во-вторых, насколько это будет ресурсоемко, если загонять в цикл перебор всех изображений и проверка их координат, причем делать это к тому же периодически - я боюсь тут скорее браузер повесится, чем ускорит загрузку изображений.
Это если кардинально не переделывать страницы через подгрузку по аяксу...

Оффлайн alexburn

  • Бизнес оценка: (1, 100%)
  • КМС
  • *****
  • СПАСИБО: 1056
  • Сообщений: 3375
  • Карма: 72
  • Пол: Мужской
  • Нужна прога для компа?
    • Просмотр профиля
    • Прикладные программы на заказ

Оффлайн alexburn

  • КМС
  • *****
  • Доп. информация
    • Бизнес оценка: (1, 100%)
    • СПАСИБО: 1056
    • Сообщений: 3375
    • Карма: 72
    • Пол: Мужской
    • Нужна прога для компа?
      • Просмотр профиля
      • Прикладные программы на заказ
Может просто ссылку/кнопку сделать - отобразить картинки :) ?

Оффлайн DogicaАвтор темы

  • Бизнес оценка: (0)
  • Ветеран
  • *****
  • СПАСИБО: 441
  • Сообщений: 1314
  • Карма: 36
  • Пол: Мужской
  • www.dogica.com
  • Награды SEO-специалист
    • Просмотр профиля
    • DOGICA

Оффлайн DogicaАвтор темы

  • Ветеран
  • *****
  • Доп. информация
    • Бизнес оценка: (0)
    • СПАСИБО: 441
    • Сообщений: 1314
    • Карма: 36
    • Пол: Мужской
    • www.dogica.com
    • Награды SEO-специалист
      • Просмотр профиля
      • DOGICA
неинтересно тогда будет сайт выглядеть.. пустым что ли
ну а если упрoстить задачу и попробовать загружать картинки по мере прокрутки странички а не по полю зрения
но опять же - картинок много - как применить ко всем?
DOGICA® 3D World of Dog & Puppy
HTTP://WWW.DOGICA.COM  ;)

Оффлайн Старый

  • Бизнес оценка: (9, 100%)
  • Мастер
  • *****
  • СПАСИБО: 1694
  • Сообщений: 5489
  • Карма: 159
  • Ищу работу постоянную, удалённую с окладом.
  • Награды Более одной тысячи спасибо КМС поисковой оптимизации
    • Просмотр профиля

Оффлайн Старый

  • Мастер
  • *****
  • Доп. информация
    • Бизнес оценка: (9, 100%)
    • СПАСИБО: 1694
    • Сообщений: 5489
    • Карма: 159
    • Ищу работу постоянную, удалённую с окладом.
    • Награды Более одной тысячи спасибо КМС поисковой оптимизации
      • Просмотр профиля
Мне кажется, что с реализацией выйдут проблемы.

Он (Dogica), наверное, как на bbc.com хочет.  :)

но опять же - картинок много - как применить ко всем?

В css или js указывать тег IMG. А чтобы не обрабатывались вообще все картинки, указать нужный блок, например:
article img {}


Оффлайн Tekstilgrad-Maderas

  • Бизнес оценка: (0)
  • Ветеран
  • *****
  • СПАСИБО: 688
  • Сообщений: 1168
  • Карма: 126
  • Пол: Мужской
  • Награды КМС поисковой оптимизации
    • Просмотр профиля

Оффлайн Tekstilgrad-Maderas

  • Ветеран
  • *****
  • Доп. информация
    • Бизнес оценка: (0)
    • СПАСИБО: 688
    • Сообщений: 1168
    • Карма: 126
    • Пол: Мужской
    • Награды КМС поисковой оптимизации
      • Просмотр профиля
Он (Dogica), наверное, как на bbc.com хочет.  :)


Вот на http://www.rambler.ru/ так же реализовано

Оффлайн ProtectYourSite

  • Бизнес оценка: (3, 100%)
  • Ветеран
  • *****
  • СПАСИБО: 253
  • Сообщений: 616
  • Карма: 3
    • Просмотр профиля
    • Удаление вирусов на сайте с гарантией

Оффлайн ProtectYourSite

  • Ветеран
  • *****
Старый,
По блокам это даже идея, к примеру при скролле проверять высоту страницы, это будет проще. И на bbc по ходу от ютуба идут скрипты картинок

Оффлайн DogicaАвтор темы

  • Бизнес оценка: (0)
  • Ветеран
  • *****
  • СПАСИБО: 441
  • Сообщений: 1314
  • Карма: 36
  • Пол: Мужской
  • www.dogica.com
  • Награды SEO-специалист
    • Просмотр профиля
    • DOGICA

Оффлайн DogicaАвтор темы

  • Ветеран
  • *****
  • Доп. информация
    • Бизнес оценка: (0)
    • СПАСИБО: 441
    • Сообщений: 1314
    • Карма: 36
    • Пол: Мужской
    • www.dogica.com
    • Награды SEO-специалист
      • Просмотр профиля
      • DOGICA
ну вот такой вариант подгрузки тоже устраивает
http://mashable.com/

В css или js указывать тег IMG. А чтобы не обрабатывались вообще все картинки, указать нужный блок, например:
article img {}

то есть в CSS или JS вместо обычного img src - прописывать IMG?
DOGICA® 3D World of Dog & Puppy
HTTP://WWW.DOGICA.COM  ;)

Оффлайн Старый

  • Бизнес оценка: (9, 100%)
  • Мастер
  • *****
  • СПАСИБО: 1694
  • Сообщений: 5489
  • Карма: 159
  • Ищу работу постоянную, удалённую с окладом.
  • Награды Более одной тысячи спасибо КМС поисковой оптимизации
    • Просмотр профиля

Оффлайн Старый

  • Мастер
  • *****
  • Доп. информация
    • Бизнес оценка: (9, 100%)
    • СПАСИБО: 1694
    • Сообщений: 5489
    • Карма: 159
    • Ищу работу постоянную, удалённую с окладом.
    • Награды Более одной тысячи спасибо КМС поисковой оптимизации
      • Просмотр профиля
то есть в CSS или JS вместо обычного img src - прописывать IMG?

Нет, просто оперируете не классом, а дочерним элементом (тегом).


Оффлайн viktalina

  • Бизнес оценка: (0)
  • Старожил
  • ****
  • СПАСИБО: 172
  • Сообщений: 291
  • Карма: 18
  • Пол: Женский
  • пытаюсь освоить СЕО, может не надо..?..
  • Награды Более 100 спасибо
    • Просмотр профиля
    • ремонт АКПП

Оффлайн viktalina

  • Старожил
  • ****
  • Доп. информация
    • Бизнес оценка: (0)
    • СПАСИБО: 172
    • Сообщений: 291
    • Карма: 18
    • Пол: Женский
    • пытаюсь освоить СЕО, может не надо..?..
    • Награды Более 100 спасибо
      • Просмотр профиля
      • ремонт АКПП
Вы ни разу не видели чтоли такую реализацию? Такой бред пишите. Все это делается через jquery
Ищите в гугле Отложенная загрузка изображений


 

Похожие темы

  Тема / Автор Ответов Последний ответ
3 Ответов
7736 Просмотров
Последний ответ 23-09-2012, 16:47:42
от Nurlan
0 Ответов
716 Просмотров
Последний ответ 17-11-2012, 22:55:27
от Stivin
2 Ответов
1371 Просмотров
Последний ответ 09-05-2013, 07:34:54
от Zavu
11 Ответов
3838 Просмотров
Последний ответ 06-06-2013, 05:47:02
от Sead
0 Ответов
506 Просмотров
Последний ответ 15-02-2016, 11:51:40
от smartimax87