Хабр Курсы для всех
РЕКЛАМА
Практикум, Хекслет, SkyPro, авторские курсы — собрали всех и попросили скидки. Осталось выбрать!
Хабр доступен 24/7 благодаря поддержке друзей
Комментарии 75
я едва заметил разницу с моим интернетом, но идея очень интересная
mootools — davidwalsh.name/mootools-lazyload
насчет нагрузки на сервер — она-то как раз, в среднем, увеличится: данных будет загружено больше, чем нужно.
И Lazy Load под свои нужды ботается тоже минут за 10. Не больше.
И Lazy Load под свои нужды ботается тоже минут за 10. Не больше.
Что-то я не ощутил пользы. На сайте, который вы привели в пример, «Опера» мне сообщила, что загрузила что-то около 170 изображений. По мере пролистывания ничего не грузилось больше, только картинки появлялись фейдом.
вы случайно небыли сегодня на машабле раньше? иначе, картинки то уже в кеше.
Никогда не был на этом сайте.
возможно у них уже что-то изменилось с того времени как я интересовался именно этой темой, но те плагины которые я привожу будут делать именно то, что я описал.
Не в mashable суть, но визуально это будет выглядеть именно так(или без фейда)
Не в mashable суть, но визуально это будет выглядеть именно так(или без фейда)
Так фейдом как раз и появляются подгружаемые картинки.
Возможно библиотеки ведут себя по разному в различных браузерах — у меня например не работает пример на jquery в swiftfox (оптимизированный firefox, если кто не знает).
Если в лисе отключить кэш, открыть firebug на вкладке net->images и скролить, то видно как картинки подгружаются.
Возможно библиотеки ведут себя по разному в различных браузерах — у меня например не работает пример на jquery в swiftfox (оптимизированный firefox, если кто не знает).
Если в лисе отключить кэш, открыть firebug на вкладке net->images и скролить, то видно как картинки подгружаются.
Как я уже сказал, у меня картинки грузятся разом, потом просто на экране появляются плавно.
Opera просто сразу всё выкачивает, ведь картинки есть в разметке и display: none не предохраняет их от скачки. С точки зрения пользователя — это правильно. С точки зрения разработчиков сайтов — распределять так нагрузку не особо умно, ибо давным-давно люди придумали лоад-балансеры, статику, спрайты и прочие красивости.
да, пример явно неудачный
вот здесь (не сочтите за рекламу) реализован lazy load www.facebook.com/pages/Web-Optimizer/183974322020 — доматываем до конца списка, только тогда начинается загрузка остального контента
Google Reader, опять же.
некоторые вещи на хабре так сильно всем знакомы, что в рекламе не нуждаются :)
Кстати варианты, когда страница подгружается при скролле (и в Ридере тоже), по моему неудачны, так как запутывают пользователя (то есть меня): размер линейки прокрутки не соответсвует действительной длине страницы, и при прокрутке вдруг все это резко прыгает. Также, если интернет не очень быстрый, то из-за задержек контент вообще будет неожиданно выскакивать, что еще хуже.
Думаю, место под подгружаемый контент надо резервировать заранее.
Думаю, место под подгружаемый контент надо резервировать заранее.
для каждого плагина можно посмотреть демки.
Спасибо, я уже не одну неделю ломаю себе голову как называется данный плагин! Спасибо!
На безлимитке мне бы не очень понравилось, что страничка открытая полчаса назад начинает тупить и грузиться, когда я наконец решил ее почитать
А вот на 3G с недешевым трафиком это очень полезно.
Было бы интересно увидеть подобный функционал, в виде расширения для браузера. То есть кому нужно — ставит, а у кого безлимитка — не ловит непонятных глюков с недогруженными картинками.
А вот на 3G с недешевым трафиком это очень полезно.
Было бы интересно увидеть подобный функционал, в виде расширения для браузера. То есть кому нужно — ставит, а у кого безлимитка — не ловит непонятных глюков с недогруженными картинками.
Полезно, когда вас везут в тоннеле и вы как раз дочитали до незагруженного места?
Было бы здорово, если бы браузеры просто сами сортировали загрузку картинок, определяя те, которые появятся первыми, затем на следующей странице, затем в конце, затем все остальные… Или это уже и так есть? Во всяком случае, если divёы с элементами первой страницы не будут загнаны в конец html-документа (как в Википедии, например), то >img< как раз будут в порядке появления.
Было бы здорово, если бы браузеры просто сами сортировали загрузку картинок, определяя те, которые появятся первыми, затем на следующей странице, затем в конце, затем все остальные… Или это уже и так есть? Во всяком случае, если divёы с элементами первой страницы не будут загнаны в конец html-документа (как в Википедии, например), то >img< как раз будут в порядке появления.
Приведенный пример понравился. Именно «мягкостью» появления картинок под катом. То, что я видел до этого, когда картинки просто недогружались и вместо них появлялась дырка меня порядком бесило (на www.smashingmagazine.com часто такое бывает в обзорах). Особенно это напрягает, когда картинки большие и ты дожидаешься загрузки страницы и спокойно начинаешь ее просматривать, когда вдруг, после очередного скролла обнаруживаешь, что тебе «подсунули огрызок» страницы и остатки ждать нужно опять.
Дабы не быть многословным — на сайте ютуба такая же вещь, когда справа список рекомендуемых и если резко промотать вниз — догружаются пикчи
всем чмоке
всем чмоке
если кэш не пустой, то естественно будет тянуть из него. Выше люди привели другие примеры, может и правда у машабла это «уже» не работает.
Если вы откроете эту страницу в chrome или firefox c запущенным http-дебагером и будете не спеша скролить страницу вниз, то дебагер вам наглядно покажет как подгружаются файлы.
вот результат эксперимента с выдёргиванием сетевого шнура:
Эксперимент с тегом img не удался :) Посему
просто линк www.pict.com/view/3089251/800/ss
За другие библиотеки не скажу, а класс для mootools реализует нечто похожее на onFocus (навешивает обработчик на скрол, который обрабатывает текущие координаты и подгружает изображения по необходимости).
а как насчет ленивой загрузки фоновых (background) изображений? :)
Выше уже отметили, что данный прием несколько раздражает. Для счастливых обладателей быстрого интернета это еще подходит и они не заметят неудобств.
Если раньше я просто открывал страницу в фоновой вкладке и ждал пока она загрузится, то при использовании lazy load мне нужно сначала подождать пока загрузится страница, а потом проскроллить ее до конца и подождать пока загрузятся картинки. Мягко говоря, это не слишком-то удобно…
Если раньше я просто открывал страницу в фоновой вкладке и ждал пока она загрузится, то при использовании lazy load мне нужно сначала подождать пока загрузится страница, а потом проскроллить ее до конца и подождать пока загрузятся картинки. Мягко говоря, это не слишком-то удобно…
Было бы здорово иметь такого рода пользовательский скрипт, скажем, для greasemonkey, потому что на сайте вцелом это не всегда нужно. То есть на представлениях такого рода, ленивая загрузка, кнешно необходима. Но, как правильно заметил Peretyaka, такая штука есть не очень здорово для активного сёрфинга на широченном безлимите :) А для людей, что сидят на даче с триджи мопедом не помешал бы аддон в браузер.
Есть плагин для Wordpress, но у меня на 2.9.2 версии не работает. Сейчас буду пробовать вручную.
Классная вещь!
Но эти сеошники… чую как они завоют из-за того что в scr прописана затычка изначально, то поисковики не будут видеть картинки…
Но эти сеошники… чую как они завоют из-за того что в scr прописана затычка изначально, то поисковики не будут видеть картинки…
Здесь используется загрузка скрипта в HEAD страницы, поэтому приходится загружать jquery минимальный, потом ещё этот скрипт, и он начинает работать сразу же, ДО загрузки картинок. Он их прячет (меняет src на grey), а потом по событиям показывает (грузит) в нужный момент.
Но это очень грубый вариант, хотя и позволяющий работать с любым сущестующим проектов.
Если же использовать подобную технологию на собственном проекте, лучше всего сделать, чтобы картинки изначально шли с src подложки grey, и был атрибут originalSrc (еcли js включен), и чтобы скрипты грузились правильно, то есть в конце страницы.
Но это очень грубый вариант, хотя и позволяющий работать с любым сущестующим проектов.
Если же использовать подобную технологию на собственном проекте, лучше всего сделать, чтобы картинки изначально шли с src подложки grey, и был атрибут originalSrc (еcли js включен), и чтобы скрипты грузились правильно, то есть в конце страницы.
Ваш mashable.com ужасно долго думал прежде чем отрендериться на фаерфоксе. Какая уж тут скорость? Если бы был левый сайт — я б его закрыл наверно, не дожидаясь загрузки.
Рубить нафиг весь яваскрипт лишний и верстку надо делать легкую.
Рубить нафиг весь яваскрипт лишний и верстку надо делать легкую.
А как с SEO?
На дочерних сайтах Tuts+ Network (Vectortuts, Psdtuts, ...) картинки тоже грузятся через lazy-load скрипт. Это очень мешает, когда открываешь страничку и сохраняешь её: сохраняются только загруженные изображения. Приходится блокировать этот скрипт.
Счетчик стал грузится только при промотке к самому низу страницы, как это исправить?
В избранное.
не ну если они есть в кеше браузера, то оттуда и возьмутся, правда браться они будут в момент прокрутки, а не при загрузке.
Да, я полностью с Вами согласен, просто сказал как он это делает=)
тут имеется в виду экономия трафика сервера а не пользователя
картинка будет показана из кэша в любом случае, кэш отключить может только пользователь браузера
Ну так и на сервере эконимии не получается, так как пользователь каждый раз при загрузке страницы, вместо того, чтобы показать картинку из кэша браузера, дергает его, чтобы тот отдавал картинку пользователю.
Если картинка уже есть в кэше браузера, она дёргается из кэша, а не с сервера.
mashable.com тормозит неподецки даже на chrome на 4хядернике из-за этой lazy load.
Можно представить менее тормозящую технику?
Можно представить менее тормозящую технику?
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
Увеличиваем скорость загрузки сайта используя lazy-load изображений