Погрузка только видимых пользователю картинок
Подскажите как можно подгружать только те картинки, что находятся в области видимости пользователя
Как например кометы здесь http://api.jquery.com/scroll/ |
Когда ищешь картинки в через гугл в гуглХроме картинки тоже так же подгружаются.
Как я думаю, решение такое. Фиксируешь блок в низу окна браузера (через css - position: fixed; bottom:0; ), а потом на лету яваскриптом подкружаешь контент тем контенерам которые выше этого зафиксированного. Но это моя теория пока, ещё не достаточно инфы нашёл. В Гугл ответы и вопросы нашёл такое: // Определение высоты видимой части страницы function windowHeight() { var de = document.documentElement; return self.innerHeight || ( de && de.clientHeight ) || document.body.clientHeight; } // Определение ширины видимой части страницы function windowWidth() { var de = document.documentElement; return self.innerWidth || ( de && de.clientWidth ) || document.body.clientWidth; } |
По-моему, очень сомнительная оптимизация и подходит, разве что, для мобильных устройств (для которых очень актуален трафик) и для сайтов-имиджборд (где на странице куча изображений сомнительной нужности).
Для обычного сайта, да хоть бы, типа javascript.ru, достаточно сделать так, чтобы пользователь мог работать со страницей без особого дискомфорта еще до полной ее загрузки (а, лучше, даже до DOMContentLoaded), а в это время спокойно её догружать. Кстати, ЕМНИМС, Опера отдает приоритет в загрузке тем изображениям, которые видимы на экране. Главное - чтобы они не "прыгали" при этом :) |
Нашел решение, если кому то понадобиться
http://www.appelsiini.net/projects/lazyload |
Часовой пояс GMT +3, время: 16:27. |