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 2015-11-18 16:15:29 +03:00
parent 4bca225593
commit 547854a151
1655 changed files with 847 additions and 89231 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,36 +0,0 @@
Функция должна по текущей прокрутке определять, какие изображения видимы, и загружать их.
Она должна срабатывать не только при прокрутке, но и при загрузке. Вполне достаточно для этого -- указать ее вызов в скрипте под страницей, вот так:
```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`).
[edit src="solution"]Открыть полное решение в песочнице[/edit]