Не нравятся результаты поиска? Попробуйте другой поиск!
DLE FAQ » Все вопросы » Общие вопросы » загрузка изображений при скролинге

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


     17.03.2014    скролинг, загрузка изображений, подгрузка картинок    Все вопросы » Общие вопросы    1988

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

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

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

Ответил: D0Gmatist


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

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

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

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


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

10 комментариев

Roman.NMSK
Юзер

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

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

Lynat1k
Юзер

Lynat1k - 17 марта 2014 15:02 -

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

Roman.NMSK
Юзер

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

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

Lynat1k
Юзер

Lynat1k - 17 марта 2014 16:46 -

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

Roman.NMSK
Юзер

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

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

Lynat1k
Юзер

Lynat1k - 18 марта 2014 00:56 -

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

D0Gmatist
Местный

D0Gmatist - 18 марта 2014 11:48 -

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

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

Lynat1k
Юзер

Lynat1k - 18 марта 2014 01:16 -

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

D0Gmatist
Местный

D0Gmatist - 18 марта 2014 11:48 -

Да можно

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

Lynat1k
Юзер

Lynat1k - 18 марта 2014 13:02 -

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

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

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

наверх