Мы в твиттере Мы в телеграме!

Провеббер » DataLife Engine » Постепенная загрузка изображений

Набор в команду! Ведется набор в команду, для наполнения сайта новым, интересным контентом. Если у тебя есть предложения, свободное время, ты обладаешь интересным контентом, и хочешь поделиться с другими?
Обращайся к нам в ЛС группы Вконтакте.

Постепенная загрузка изображений

Данный материал предоставлен сайтом ProWebber.cc исключительно в ознакомительных целях. Администрация не несет ответственности за его содержимое.
Скачать бесплатно Постепенная загрузка изображений.

Cкрипт постепенной загрузки изображений
Постепенная загрузка изображений

Как оно работает
Изображение загружается только тогда когда попадает в видимую зону
Примеры
http://dogmatist.nbr.by/lastnews/page/2/
или очень хорошо видно в итогах поиска...
А так же можно посмотреть тут http://jsfiddle.net/D0Gmatist/Z5mFq/2/
Скачайте файл
imgloads.rar [1.6 Kb] (cкачиваний: 466)
MD5: 68005b076c40f2d66b4519a484ffb789
и из него залейте файл ImgLoads.js в папку js в вашем шаблоне

Перед
</head>


Прописать
<!--jQuery-постепенная-загрузка-изображений-->
<script ENGINE="text/javascript" src="{THEME}/js/ImgLoads.js"></script>
<!--jQuery-постепенная-загрузка-изображений-->


и в шаблонах, там где изображение из поста, дописать к src data-
чтоб было как ниже на примерах
<img data-src="[xfvalue_poster]">

<img data-src="{image-1}">


http://dogmatist.nbr.by/?do=search=Джеки Чан

http://dogmatist.nbr.by/?do=search=2012

http://dogmatist.nbr.by/?do=search=Комедия


Дополнительные ссылки на скачивание ТОЛЬКО для зарегистрированных


+25
Просмотры: 12 340 :: Комментарии (46) :: :: Нужна помощь? Задайте вопрос на форуме ::
Теги: js, dle
Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.

#1wmid32

  • 2 февраля 2013 13:08
  • Регистрация: 5.08.2011
  • Был(а) онлайн: 7.09.2015
  • Комментариев: 143
  • 0
Точно пашет? а то я ставил подобное и нифига! Все картинки не загружало вообще

--------------------

#2D0Gmatist

  • 2 февраля 2013 13:11
  • Регистрация: 28.07.2012
  • Был(а) онлайн: 24.06.2021
  • Комментариев: 291
  • +3
Я же скинул ссылок гору с рабочими примерами

--------------------

#3vpkach

  • 2 февраля 2013 13:48
  • Регистрация: 18.07.2012
  • Был(а) онлайн: 6.01.2015
  • Комментариев: 113
  • 0
ооо спасибо я видал у тебя классно

#4serforall

  • 2 февраля 2013 13:49
  • Регистрация: 6.12.2011
  • Был(а) онлайн: 14.02.2016
  • Комментариев: 204
  • 0
Что за шаблон на сайте???

--------------------

#5masya1981

  • 2 февраля 2013 13:50
  • Регистрация: 4.10.2010
  • Был(а) онлайн: 16.06.2024
  • Комментариев: 53
  • 0
Подскажите какие + от такой загрузки изображений?

#6D0Gmatist

  • 2 февраля 2013 14:08
  • Регистрация: 28.07.2012
  • Был(а) онлайн: 24.06.2021
  • Комментариев: 291
  • +2
Цитата: serforall
Что за шаблон на сайте???
Моя работа

Цитата: masya1981
Подскажите какие + от такой загрузки изображений?
Ну прикинь сам... трафик не тратится ... и загрузка страницы быстрее ...

--------------------

#7scome

  • 2 февраля 2013 14:24
  • Регистрация: 26.08.2012
  • Был(а) онлайн: 29.01.2014
  • Комментариев: 23
  • 0
D0Gmatist, megogo.net шаблон. Осталось слайдер добавить и все будет идентично.

--------------------

#8JIexaman

  • 2 февраля 2013 15:02
  • Регистрация: 26.02.2010
  • Был(а) онлайн: 2.10.2013
  • Комментариев: 34
  • 0
"sss" в футере сайта убило =)
А так, модуль интересный, возьмём )

#9Min-Z-Drav

  • 2 февраля 2013 15:17
  • Регистрация: 14.09.2010
  • Был(а) онлайн: 16.10.2018
  • Комментариев: 51
  • +3
Прекрасно работает спасибо!

--------------------

#10Andrey™

  • 2 февраля 2013 15:44
  • Регистрация: 28.09.2010
  • Был(а) онлайн: 28.06.2024
  • Комментариев: 153
  • +2
Цитата: Min-Z-Drav
А так, модуль интересный, возьмём )
Это js скрипт.

#11vpkach

  • 2 февраля 2013 17:06
  • Регистрация: 18.07.2012
  • Был(а) онлайн: 6.01.2015
  • Комментариев: 113
  • +1
Всё работает без проблем вообще !

#12hatchees

  • 2 февраля 2013 17:36
  • Регистрация: 4.12.2010
  • Был(а) онлайн: 24.01.2017
  • Комментариев: 161
  • -6
Так это обычный скрипт Lazyload + он не загружает картинки по видимости, при скроле он просто создает эффект блика для картинки... нупы :)

#13iwanowi4

  • 2 февраля 2013 19:16
  • Регистрация: 28.09.2010
  • Был(а) онлайн: 31.12.2019
  • Комментариев: 118
  • +3
http://www.appelsiini.net/projects/lazyload
Тут найдёте полное описание всех возможных функций для подобного скрипта, и демо как они работают...
Цитата: hatchees
эффект блика для картинки... нупы :)

http://www.appelsiini.net/projects/lazyload/enabled.html - насчёт "нупов", не стоит так горячиться... dash
картинка реально не загружается, пока не попадёт в видимую часть окна.

#14Aslan

  • 2 февраля 2013 20:46
  • Регистрация: 6.12.2010
  • Был(а) онлайн: 24.05.2014
  • Комментариев: 170
  • 0
На демо выглядит неплохо, но упомянутые блики - не есть хорошо.
Картинки выскакивают резко и с каким-то блыманьем - глазам неприятно смотреть на сайт с таким эффектом.
Может, кто-то доработает и сделает более плавный вариант подгрузки картинок, включая прогресс-бар и постепенное появление изображение? Например, неплохо реализовано на ру-сайте бонприкса:
http://www.bonprix.ru/kategoriya/zhienskaia-moda-zhienskaia-moda-topy/?pgs=96

#15D0Gmatist

  • 3 февраля 2013 00:41
  • Регистрация: 28.07.2012
  • Был(а) онлайн: 24.06.2021
  • Комментариев: 291
  • +1
Цитата: hatchees
Так это обычный скрипт Lazyload + он не загружает картинки по видимости, при скроле он просто создает эффект блика для картинки... нупы :)
Я от каждого твоего ответа каждяй раз болдю ...
Цитата: iwanowi4
картинка реально не загружается, пока не попадёт в видимую часть окна.
Спасибо ....
Цитата: Aslan
На демо выглядит неплохо, но упомянутые блики - не есть хорошо.
Картинки выскакивают резко и с каким-то блыманьем - глазам неприятно смотреть на сайт с таким эффектом.
Может, кто-то доработает и сделает более плавный вариант подгрузки картинок, включая прогресс-бар и постепенное появление изображение? Например, неплохо реализовано на ру-сайте бонприкса:
Да... тут я согласен есть нюанс .. если будет время .. то и сам поправлю...


Цитата: JIexaman
"sss" в футере сайта убило =)
А так, модуль интересный, возьмём )

Блиииин ))) шаблон не дописан не надо цепляться

hatchees,
Я вот сколько вижу ... каждяй раз ты себя выставляешь бубном ... НЕНАДОЕЛО???

если ты хочешь убедиться в работе скрипта то вот тебе БАРАНУ
http://screen.ticno.com/upload/t/Y/tY2HBDsuLGmAzLFMKaUw.png
Вот тебе изображение скрин без промотки
А вот тебе с промотки НЕБОЛЬШОЙ
http://screen.ticno.com/upload/V/L/VLPHQXEFjQiCqUe9sr8q.png
И вот тебе с полной загрузкой
http://screen.ticno.com/upload/8/y/8ydR46HP6h6LvAd89jWK.png

--------------------

#16D0Gmatist

  • 3 февраля 2013 01:20
  • Регистрация: 28.07.2012
  • Был(а) онлайн: 24.06.2021
  • Комментариев: 291
  • +2
сори за лексикон .. я пью

--------------------

#17D0Gmatist

  • 3 февраля 2013 01:47
  • Регистрация: 28.07.2012
  • Был(а) онлайн: 24.06.2021
  • Комментариев: 291
  • +1
Цитата: scome
D0Gmatist, megogo.net шаблон. Осталось слайдер добавить и все будет идентично.
Ну я не спорю об сходстве .. но об функционале то гогоша ЛОХ...
по сравнению с тем что у меня ....... прошу eчесть что я пишу сайт ОДИН и + он не дописан (не доработан)

--------------------

#18kinoline

  • 3 февраля 2013 02:06
  • Регистрация: 2.02.2013
  • Был(а) онлайн: 17.07.2013
  • Комментариев: 1
  • 0
Aslan,
на сайте бонприкса как раз таки фейк с эмитацией загрузки картинок. Проверяется довольно таки легко - отключай ява скрипт и смотри, что все картинки загружены уже. А на сайте D0Gmatist-а, если отключить, то ни одной картинки загружено не будет.

D0Gmatist, нет желания на продажу замутить такой шаб? Я бы купил

#19D0Gmatist

  • 3 февраля 2013 02:24
  • Регистрация: 28.07.2012
  • Был(а) онлайн: 24.06.2021
  • Комментариев: 291
  • +1
kinoline,
я его как доведу до ума то буду вставлять на продажу ... с модулем для полей которые на сайте Вы видите в меню (год, страна, жанр)

К стати встроил модул .. - скрипт отдельной жалобы на видио
http://dogmatist.nbr.by/films/2388-nikogda-ne-sdavaysya-never-back-down.html
Нажмите и увидите жалобу .. если кого то заинтересует то могу выложить
http://screen.ticno.com/index.php?image=jKiTaJQWSCvirPVrfrcw.png




--------------------

#20iwanowi4

  • 3 февраля 2013 04:54
  • Регистрация: 28.09.2010
  • Был(а) онлайн: 31.12.2019
  • Комментариев: 118
  • 0
Цитата: kinoline
... фейк с эмитацией загрузки картинок. Проверяется довольно таки легко - отключай ява скрипт и смотри...
Ребятки, ну прежде чем заявлять что то, посмотрите что и как работает, почитайте описание функций работы этих скриптов...
Не знаю как у них конкретно устроено (похоже на замес ajax и javascript).
Но вот тут http://www.bonprix.ru/js-lib/libs/requirejs/2.1.0/require.min.js
в коде отчётливо виден jQuery plugin for lazy loading images, а к примеру, в подобной конструкции:
<img class="lazy" src="img/grey.gif" data-original="img/example.jpg"  width="640" heigh="480">
<noscript><img src="img/example.jpg" width="640" heigh="480"></noscript>
картинки также смогут увидеть все те, у кого отключен javascript и роботы в том числе, хотя они могут и проигнорировать, чего у них на уме... mail

1 2 3
Предыдущая    Следующая
Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.

Архив новостей
Декабрь 2024 (9)
Ноябрь 2024 (9)
Октябрь 2024 (169)
Сентябрь 2024 (13)
Август 2024 (60)
Июль 2024 (12)

Последние комментарии: