Не нравятся результаты поиска? Попробуйте другой поиск!
dle-faq.ru FAQ (все вопросы) Общие вопросы загрузка изображений при скролинге

загрузка изображений при скролинге


     17.03.2014    Общие вопросы    1517

вопрос
есть ли готовы решения или лучшие варианты для DLE

нужно чтобы картинки на сайте прогружались только в видимой части экрана.
то есть чтобы не все сразу загрузились а показывало только то что попадает в видимую часть экрана браузера и при скролинге страницы подгружались остальные картинки тем самым ускорив загрузку страницы

желательно чтобы этот скрипт влиял как на скорость загрузки сайта для юзеров так и для поисковых роботов
знаю что в сети такого много - но не понятно что рабочее а что нет и что эффективней

Ответил: D0Gmatist


создать файл blabla.js с содержимым

подключить файл между тегами

картинки прописывать в постах таки образом
<img data-src="{image-1}">

или из доп поля ... при условии что у вас в доп.поля прямая ссылка на изображение
<img data-src="[xfvalue_poster]">


обратите внимание на то что идёт не src="" а data-src=""

Комментарии пользователей (10)

Roman.NMSK
10

95 | 34

Roman.NMSK - 17 марта 2014 14:32 - Юзер

почитай инфу по запросу lazyload jquery
скрипта что бы и для поиска и для людей - нормального нет. там 2 варианта:
1. урл картинок прописывается в дополнительный тег, а в src идет загрушка и при скроле скриптом идет замена. людям хорошо, лишнее не грузится, а поисковики не поймут и не найдут картинок.
2. предзагрузка фото при скроле - современные браузеры при рендеринге страницы шлют GET-запросы и все картинки страницы все равно грузятся в кеш. юзерам от этого плюс, только если на странице много фото и выводится уже будут по немногоу. а не всем скопом

Lynat1k
1

373 | 93

Lynat1k - 17 марта 2014 15:02 - Юзер

то есть толкового варианта нету? просто много картинок на странице около 40. и как бы если юзер не листает до конца страницы то заченм ему еще грузить 20 картинок..пусть просто загружаются те 20 что попадают в видимую часть экрана браузера - или это нереально по второму пункту

Roman.NMSK
10

95 | 34

Roman.NMSK - 17 марта 2014 16:39 - Юзер

тогда первый вариант с подменой src, а для поисковиков думать над созданием sitemap-картинок

Lynat1k
1

373 | 93

Lynat1k - 17 марта 2014 16:46 - Юзер

а как первый вариант реализовать? есть инструкция?

Roman.NMSK
10

95 | 34

Roman.NMSK - 17 марта 2014 16:51 - Юзер

достаточно воспользоваться поиском и в коде src вставки изображений сменить

Lynat1k
1

373 | 93

Lynat1k - 18 марта 2014 00:56 - Юзер

а что это за код такой интересный в ответе после
'data:image/gif

D0Gmatist
225

794 | 281

D0Gmatist - 18 марта 2014 11:48 - Местный

'data:image/gif это фоновая картинка в формате base64

Каждый программист знает - в правильном софте все должно быть прекрасно:
и пользовательский интерфейс, и программные решения, и гениальные ошибки!
Болтовня ничего не стоит. Покажите мне код.

Lynat1k
1

373 | 93

Lynat1k - 18 марта 2014 01:16 - Юзер

и сразу вопрос для D0Gmatist
можно ли как то сделать чтобы скрипт что вы написали начинал прогрузку картинок не тогда когда они попали в видимую часть экрана а за 200рх до начала видимой части - то есть чтобы от нижней границы на 200рх вниз уже сразу подгружались картинки.. чтоб юзер не видел серых квыадратиков и анимации появления картинок?

D0Gmatist
225

794 | 281

D0Gmatist - 18 марта 2014 11:48 - Местный

Да можно

Каждый программист знает - в правильном софте все должно быть прекрасно:
и пользовательский интерфейс, и программные решения, и гениальные ошибки!
Болтовня ничего не стоит. Покажите мне код.

Lynat1k
1

373 | 93

Lynat1k - 18 марта 2014 13:02 - Юзер

а как такое сделать?

Чтобы комментировать - войдите или зарегистрируйтесь на сайте

Похожие вопросы