jeena/en.javascript.info
1
0
Fork 0
Code Issues Pull requests Projects Packages Wiki Activity Actions

up

Browse source
This commit is contained in:
Ilya Kantor 2017-03-09 00:48:54 +03:00
parent d85be5f17b
commit fc84391bd2
143 changed files with 6874 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

34
2-ui/3-event-details/8-onscroll/3-load-visible-img/solution.md Normal file
View file

@ -0,0 +1,34 @@
Функция должна по текущей прокрутке определять, какие изображения видимы, и загружать их.
Она должна срабатывать не только при прокрутке, но и при загрузке. Вполне достаточно для этого -- указать ее вызов в скрипте под страницей, вот так:
```js
...страница...
function isVisible(elem) {
var coords = elem.getBoundingClientRect();
var windowHeight = document.documentElement.clientHeight;
// верхняя граница elem в пределах видимости ИЛИ нижняя граница видима
var topVisible = coords.top > 0 && coords.top < windowHeight;
var bottomVisible = coords.bottom < windowHeight && coords.bottom > 0;
return topVisible || bottomVisible;
}
*!*
showVisible();
window.onscroll = showVisible;
*/!*
```
При запуске функция ищет все видимые картинки с `realsrc` и перемещает значение `realsrc` в `src`. Обратите внимание, т.к. атрибут `realsrc` нестандартный, то для доступа к нему мы используем `get/setAttribute`. А `src` -- стандартный, поэтому можно обратиться по DOM-свойству.
**Функция проверки видимости `isVisible(elem)` получает координаты текущей видимой области и сравнивает их с элементом.**
Для видимости достаточно, чтобы координаты верхней(или нижней) границы элемента находились между границами видимой области.
В решении также указан вариант с `isVisible`, который расширяет область видимости на +-1 страницу (высота страницы -- `document.documentElement.clientHeight`).

164
2-ui/3-event-details/8-onscroll/3-load-visible-img/solution.view/index.html Normal file
View file

@ -0,0 +1,164 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.news-item {
width: 700px;
text-align: justify;
margin-top: 20px;
}
.news-item .title {
font-weight: bold;
margin-bottom: 5px;
}
</style>
</head>
<body>
<p>Тексты и картинки взяты с сайта http://etoday.ru. </p>
<h3>Все изображения с realsrc загружаются, когда становятся видимыми.</h3>
<div class="news-item">
<div class="title">Космопорт Америка \ Architecture</div>
Будущее уже сейчас! Скоро фраза из фантастического фильма "флипнуть до космопорта" станет реальностью. По крайней мере вторую ее часть человечество обеспечило. В октябре состоялась официальная церемония открытия космопорта «Америка», первой в мире коммерческой
площадки для частных космических полетов. Космопорт открылся в пустыне штата Нью-Мексико. Проект был реализован английским бюро Foster and Partners. Космопорт включает в себя зал ожидания и подготовки к полетам, диспетчерский пункт и ангар. Также
обеспечена взлетно-посадочная полоса длиной в три километра.
<div class="illustrations">
<img src="https://js.cx/lazyimg/1.gif" width="200" height="140" realsrc="https://js.cx/lazyimg/1.jpg">
</div>
</div>
<div class="news-item">
<div class="title">Рокер и супермодель в Vogue Russia \ Celebrities</div>
Супермодель Анна Вялицына (Anne Vyalitsyna) и музыкант Адам Ливайн (Adam Levine) снялись в ноябрьском номере Vogue Russia. Снимал их Аликс Малка (Alix Malka). Анна и Адам примерили на себя рок-н-ролльные наряды от Alexander Wang, Louis Vuitton, Alexander
McQueen, Balmain, Yves Saint Laurent, подобранные для них Катериной Мухиной.
<div class="illustrations">
<img src="https://js.cx/lazyimg/1.gif" width="200" height="259" realsrc="https://js.cx/lazyimg/2-1.jpg">
<img src="https://js.cx/lazyimg/1.gif" width="200" height="260" realsrc="https://js.cx/lazyimg/2-2.jpg">
</div>
</div>
<div class="news-item">
<div class="title">Старость - не радость в Vogue Italia \ Fashion Photo</div>
Стивен Мейзел (Steven Meisel) снял фотосессию для октябрьского Vogue Italia. В съемках приняли участие: Карен Элсон (Karen Elson), Джиневер ван Синус (Guinevere van Seenus), Эмма Балфур (Emma Balfour), Эн Уст (An Oost), Коринна Ингенлеф (Corinna Ingenleuf),
Танга Моро (Tanga Moreau), Кордула Рейер (Cordula Reyer), Гейл о`Нил (Gail O'Neil), Эвелин Кун (Evelyn Kuhn), Каролин де Мэгрэ (Caroline de Maigret), Дэльфин Бафор (Delfine Bafort), Кирстен Оуэн (Kirsten Owen), Гунилла Линдблад (Gunilla Lindblad).
<div class="illustrations">
<img src="https://js.cx/lazyimg/1.gif" width="341" height="474" realsrc="https://js.cx/lazyimg/3-1.jpg">
<img src="https://js.cx/lazyimg/1.gif" width="338" height="474" realsrc="https://js.cx/lazyimg/3-2.jpg">
</div>
</div>
<div class="news-item">
<div class="title">"Вышитый рентген" Matthew Cox \ Art</div>
Художник из Филадельфии Мэтью Кокс (Matthew Cox) создал серию работ, в которых объединены медицинский рентген и вышивка. Художник взял рентгенограммы и вышил их предполагаемое содержание частично со скелетными элементами. Получилось зловеще и интригующе.
Выставка "Вышитый рентген" будет демонстрироваться в галерее Packer/Schopf в Майами, в рамках Базельской Художественной Недели. Эта серия - только треть творческой продукции Кокса. Он также создает традиционные картины и иллюстрации.
<div class="illustrations"><img src="https://js.cx/lazyimg/1.gif" width="680" height="452" realsrc="https://js.cx/lazyimg/4.jpg"></div>
</div>
<div class="news-item">
<div class="title">Подарочный каталог Apple 1983 \ Creative</div>
Etoday предлагает полистать страницы подарочного каталога продукции Apple образца 1983 года. Кажется, это было так давно! Эта серия - только треть творческой продукции Кокса. Он также создает традиционные картины и иллюстрации.
<div class="illustrations"><img src="https://js.cx/lazyimg/1.gif" width="600" height="393" realsrc="https://js.cx/lazyimg/5.jpg"></div>
</div>
<div class="news-item">
<div class="title">Винтажные открытки к празднику Halloween \ Illustrations</div>
Занимательная коллекция старых почтовых открыток праздника Halloween. Открытки взяты из ньюйоркской публичной библиотеки и датируются примерно 1910 г.
<div class="illustrations"><img src="https://js.cx/lazyimg/1.gif" width="680" height="433" realsrc="https://js.cx/lazyimg/6.jpg"></div>
</div>
<div class="news-item">
<div class="title">Фотограф Emily Lee \ Photography</div>
Молодой фотограф Эмили Ли (Emily Lee) использует фотографию, чтобы выразить свои чувства. "Когда я смотрю на жизнь через камеру, вижу все более ясно, - пишет она на своем профиле Flickr. - Фотосъемка - это искусство наблюдения." Эмили Ли - обладательница
большого таланта и умения глубоко понимать искусство, хотя учится еще только в средней школе.
<div class="illustrations"><img src="https://js.cx/lazyimg/1.gif" width="680" height="453" realsrc="https://js.cx/lazyimg/7.jpg"></div>
</div>
<div class="news-item">
<div class="title">Иконы моды в Fashimals \ Creative</div>
Fashimals - tumblr-блог, посвященный иконам моды, превращенным в животных. Здесь есть Анна Винтур, Карл Лагерфельд, Терри Ричардсон, а также много других их коллег.
<div class="illustrations"><img src="https://js.cx/lazyimg/1.gif" width="600" height="622" realsrc="https://js.cx/lazyimg/8.jpg"></div>
</div>
<script>
/**
* Проверяет элемент на попадание в видимую часть экрана.
* Для попадания достаточно, чтобы верхняя или нижняя границы элемента были видны.
*/
function isVisible(elem) {
var coords = elem.getBoundingClientRect();
var windowHeight = document.documentElement.clientHeight;
// верхняя граница elem в пределах видимости ИЛИ нижняя граница видима
var topVisible = coords.top > 0 && coords.top < windowHeight;
var bottomVisible = coords.bottom < windowHeight && coords.bottom > 0;
return topVisible || bottomVisible;
}
/**
Вариант проверки, считающий элемент видимым,
если он не более чем -1 страница назад или +1 страница вперед
function isVisible(elem) {
var coords = elem.getBoundingClientRect();
var windowHeight = document.documentElement.clientHeight;
var extendedTop = -windowHeight;
var extendedBottom = 2 * windowHeight;
// top visible || bottom visible
var topVisible = coords.top > extendedTop && coords.top < extendedBottom;
var bottomVisible = coords.bottom < extendedBottom && coords.bottom > extendedTop;
return topVisible || bottomVisible;
}
*/
function showVisible() {
var imgs = document.getElementsByTagName('img');
for (var i = 0; i < imgs.length; i++) {
var img = imgs[i];
var realsrc = img.getAttribute('realsrc');
if (!realsrc) continue;
if (isVisible(img)) {
img.src = realsrc;
img.setAttribute('realsrc', '');
}
}
}
window.onscroll = showVisible;
showVisible();
</script>
</body>
</html>

108
2-ui/3-event-details/8-onscroll/3-load-visible-img/source.view/index.html Normal file
View file

@ -0,0 +1,108 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.news-item {
width: 700px;
text-align: justify;
margin-top: 20px;
}
.news-item .title {
font-weight: bold;
margin-bottom: 5px;
}
</style>
</head>
<body>
<p>Тексты и картинки взяты с сайта http://etoday.ru. </p>
<h3>Все изображения с realsrc загружаются, когда становятся видимыми.</h3>
<div class="news-item">
<div class="title">Космопорт Америка \ Architecture</div>
Будущее уже сейчас! Скоро фраза из фантастического фильма "флипнуть до космопорта" станет реальностью. По крайней мере вторую ее часть человечество обеспечило. В октябре состоялась официальная церемония открытия космопорта «Америка», первой в мире коммерческой
площадки для частных космических полетов. Космопорт открылся в пустыне штата Нью-Мексико. Проект был реализован английским бюро Foster and Partners. Космопорт включает в себя зал ожидания и подготовки к полетам, диспетчерский пункт и ангар. Также
обеспечена взлетно-посадочная полоса длиной в три километра.
<div class="illustrations">
<img src="https://js.cx/lazyimg/1.gif" width="200" height="140" realsrc="https://js.cx/lazyimg/1.jpg">
</div>
</div>
<div class="news-item">
<div class="title">Рокер и супермодель в Vogue Russia \ Celebrities</div>
Супермодель Анна Вялицына (Anne Vyalitsyna) и музыкант Адам Ливайн (Adam Levine) снялись в ноябрьском номере Vogue Russia. Снимал их Аликс Малка (Alix Malka). Анна и Адам примерили на себя рок-н-ролльные наряды от Alexander Wang, Louis Vuitton, Alexander
McQueen, Balmain, Yves Saint Laurent, подобранные для них Катериной Мухиной.
<div class="illustrations">
<img src="https://js.cx/lazyimg/1.gif" width="200" height="259" realsrc="https://js.cx/lazyimg/2-1.jpg">
<img src="https://js.cx/lazyimg/1.gif" width="200" height="260" realsrc="https://js.cx/lazyimg/2-2.jpg">
</div>
</div>
<div class="news-item">
<div class="title">Старость - не радость в Vogue Italia \ Fashion Photo</div>
Стивен Мейзел (Steven Meisel) снял фотосессию для октябрьского Vogue Italia. В съемках приняли участие: Карен Элсон (Karen Elson), Джиневер ван Синус (Guinevere van Seenus), Эмма Балфур (Emma Balfour), Эн Уст (An Oost), Коринна Ингенлеф (Corinna Ingenleuf),
Танга Моро (Tanga Moreau), Кордула Рейер (Cordula Reyer), Гейл о`Нил (Gail O'Neil), Эвелин Кун (Evelyn Kuhn), Каролин де Мэгрэ (Caroline de Maigret), Дэльфин Бафор (Delfine Bafort), Кирстен Оуэн (Kirsten Owen), Гунилла Линдблад (Gunilla Lindblad).
<div class="illustrations">
<img src="https://js.cx/lazyimg/1.gif" width="341" height="474" realsrc="https://js.cx/lazyimg/3-1.jpg">
<img src="https://js.cx/lazyimg/1.gif" width="338" height="474" realsrc="https://js.cx/lazyimg/3-2.jpg">
</div>
</div>
<div class="news-item">
<div class="title">"Вышитый рентген" Matthew Cox \ Art</div>
Художник из Филадельфии Мэтью Кокс (Matthew Cox) создал серию работ, в которых объединены медицинский рентген и вышивка. Художник взял рентгенограммы и вышил их предполагаемое содержание частично со скелетными элементами. Получилось зловеще и интригующе.
Выставка "Вышитый рентген" будет демонстрироваться в галерее Packer/Schopf в Майами, в рамках Базельской Художественной Недели. Эта серия - только треть творческой продукции Кокса. Он также создает традиционные картины и иллюстрации.
<div class="illustrations"><img src="https://js.cx/lazyimg/1.gif" width="680" height="452" realsrc="https://js.cx/lazyimg/4.jpg"></div>
</div>
<div class="news-item">
<div class="title">Подарочный каталог Apple 1983 \ Creative</div>
Etoday предлагает полистать страницы подарочного каталога продукции Apple образца 1983 года. Кажется, это было так давно! Эта серия - только треть творческой продукции Кокса. Он также создает традиционные картины и иллюстрации.
<div class="illustrations"><img src="https://js.cx/lazyimg/1.gif" width="600" height="393" realsrc="https://js.cx/lazyimg/5.jpg"></div>
</div>
<div class="news-item">
<div class="title">Винтажные открытки к празднику Halloween \ Illustrations</div>
Занимательная коллекция старых почтовых открыток праздника Halloween. Открытки взяты из ньюйоркской публичной библиотеки и датируются примерно 1910 г.
<div class="illustrations"><img src="https://js.cx/lazyimg/1.gif" width="680" height="433" realsrc="https://js.cx/lazyimg/6.jpg"></div>
</div>
<div class="news-item">
<div class="title">Фотограф Emily Lee \ Photography</div>
Молодой фотограф Эмили Ли (Emily Lee) использует фотографию, чтобы выразить свои чувства. "Когда я смотрю на жизнь через камеру, вижу все более ясно, - пишет она на своем профиле Flickr. - Фотосъемка - это искусство наблюдения." Эмили Ли - обладательница
большого таланта и умения глубоко понимать искусство, хотя учится еще только в средней школе.
<div class="illustrations"><img src="https://js.cx/lazyimg/1.gif" width="680" height="453" realsrc="https://js.cx/lazyimg/7.jpg"></div>
</div>
<div class="news-item">
<div class="title">Иконы моды в Fashimals \ Creative</div>
Fashimals - tumblr-блог, посвященный иконам моды, превращенным в животных. Здесь есть Анна Винтур, Карл Лагерфельд, Терри Ричардсон, а также много других их коллег.
<div class="illustrations"><img src="https://js.cx/lazyimg/1.gif" width="600" height="622" realsrc="https://js.cx/lazyimg/8.jpg"></div>
</div>
<script>
// ... ваш код ...
</script>
</body>
</html>

50
2-ui/3-event-details/8-onscroll/3-load-visible-img/task.md Normal file
View file

@ -0,0 +1,50 @@
importance: 4
---
# Загрузка видимых изображений
Задача, которая описана ниже, демонстрирует результативный метод оптимизации страницы.
С целью экономии трафика и более быстрой загрузки страницы изображения на ней заменяются на "макеты".
Вместо такого изображения:
```html
<img src="yozhik.jpg" width="128" height="128">
```
![|width="128" height="128"](https://js.cx/clipart/yozhik.jpg)
Стоит вот такое:
```html
<img *!*src="1.gif"*/!* width="128" height="128" *!*realsrc="yozhik.jpg"*/!*>
```
![|width="128" height="128"](https://js.cx/lazyimg/1.gif)
То есть настоящий URL находится в атрибуте `realsrc` (название атрибута можно выбрать любое). А в `src` поставлен серый GIF размера 1x1, и так как `width/height` правильные, то он растягивается, так что вместо изображения виден серый прямоугольник.
При этом, чтобы браузер загрузил изображение, нужно заменить значение `src` на то, которое находится в `realsrc`.
Если страница большая, то замена больших изображений на такие макеты существенно убыстряет полную загрузку страницы. Это особенно заметно в случае, когда на странице много анонсов новостей с картинками или изображений товаров, из которых многие находятся за пределами прокрутки.
Кроме того, для мобильных устройств JavaScript может подставлять URL уменьшенного варианта картинки.
Напишите код, который при прокрутке окна загружает ставшие видимыми изображения.
То есть, как только изображение попало в видимую часть документа -- в `src` нужно прописать правильный URL из `realsrc`.
Пример работы вы можете увидеть в `iframe` ниже, если прокрутите его:
[iframe src="solution"]
Особенности реализации:
- При начальной загрузке некоторые изображения должны быть видны сразу, до прокрутки. Код должен это учитывать.
- Некоторые изображения могут быть обычными, без `realsrc`. Их код не должен трогать вообще.
- Также код не должен перегружать уже показанное изображение.
- Желательно предусмотреть загрузку изображений не только видимых сейчас, но и на страницу вперед и назад от текущего места.
P.S. Горизонтальной прокрутки нет.