Skip to content

Instantly share code, notes, and snippets.

@iliakan

iliakan/1.gif

Last active December 20, 2015 02:39
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save iliakan/6057532 to your computer and use it in GitHub Desktop.
Save iliakan/6057532 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!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>
<script src="lib.js"></script>
</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="1.gif" width="200" height="140" realsrc="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="1.gif" width="200" height="259" realsrc="2-1.jpg">
<img src="1.gif" width="200" height="260" realsrc="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="1.gif" width="341" height="474" realsrc="3-1.jpg">
<img src="1.gif" width="338" height="474" realsrc="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="1.gif" width="680" height="452" realsrc="4.jpg"></div>
</div>
<div class="news-item">
<div class="title">Подарочный каталог Apple 1983 \ Creative</div>
Etoday предлагает полистать страницы подарочного каталога продукции Apple образца 1983 года. Кажется, это было так давно!
Эта серия - только треть творческой продукции Кокса. Он также создает традиционные картины и иллюстрации.
<div class="illustrations"><img src="1.gif" width="600" height="393" realsrc="5.jpg"></div>
</div>
<div class="news-item">
<div class="title">Винтажные открытки к празднику Halloween \ Illustrations</div>
Занимательная коллекция старых почтовых открыток праздника Halloween. Открытки взяты из ньюйоркской публичной библиотеки и датируются примерно 1910 г.
<div class="illustrations"><img src="1.gif" width="680" height="433" realsrc="6.jpg"></div>
</div>
<div class="news-item">
<div class="title">Фотограф Emily Lee \ Photography</div>
Молодой фотограф Эмили Ли (Emily Lee) использует фотографию, чтобы выразить свои чувства. "Когда я смотрю на жизнь через камеру, вижу все более ясно, - пишет она на своем профиле Flickr. - Фотосъемка - это искусство наблюдения." Эмили Ли - обладательница большого таланта и умения глубоко понимать искусство, хотя учится еще только в средней школе.
<div class="illustrations"><img src="1.gif" width="680" height="453" realsrc="7.jpg"></div>
</div>
<div class="news-item">
<div class="title">Иконы моды в Fashimals \ Creative</div>
Fashimals - tumblr-блог, посвященный иконам моды, превращенным в животных. Здесь есть Анна Винтур, Карл Лагерфельд, Терри Ричардсон, а также много других их коллег.
<div class="illustrations"><img src="1.gif" width="600" height="622" realsrc="8.jpg"></div>
</div>
<script>
/**
* Проверяет элемент на попадание в видимую часть экрана.
* Для попадания достаточно, чтобы верхняя или нижняя границы элемента были видны.
*/
function isVisible(elem) {
var coords = getCoords(elem);
var windowTop = window.pageYOffset || document.documentElement.scrollTop;
var windowBottom = windowTop + document.documentElement.clientHeight;
coords.bottom = coords.top + elem.offsetHeight;
// верхняя граница elem в пределах видимости ИЛИ нижняя граница видима
var topVisible = coords.top > windowTop && coords.top < windowBottom;
var bottomVisible = coords.bottom < windowBottom && coords.bottom > windowTop;
return topVisible || bottomVisible;
}
/**
Вариант проверки, считающий элемент видимым,
если он не более чем -1 страница назад или +1 страница вперед
function isVisible(elem) {
var coords = getCoords(elem);
var windowHeight = document.documentElement.clientHeight;
var windowTop = window.pageYOffset || document.documentElement.scrollTop;
var windowBottom = windowTop + windowHeight;
coords.bottom = coords.top + elem.offsetHeight;
windowTop -= windowHeight;
windowBottom += windowHeight;
// top visible || bottom visible
var topVisible = coords.top > windowTop && coords.top < windowBottom;
var bottomVisible = coords.bottom < windowBottom && coords.bottom > windowTop;
console.log(elem, topVisible, bottomVisible);
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>
Raw
lib.js
function getCoords(elem) {
var box = elem.getBoundingClientRect();
var body = document.body;
var docElem = document.documentElement;
var scrollTop = window.pageYOffset || docElem.scrollTop || body.scrollTop;
var scrollLeft = window.pageXOffset || docElem.scrollLeft || body.scrollLeft;
var clientTop = docElem.clientTop || body.clientTop || 0;
var clientLeft = docElem.clientLeft || body.clientLeft || 0;
var top = box.top + scrollTop - clientTop;
var left = box.left + scrollLeft - clientLeft;
return { top: Math.round(top), left: Math.round(left) };
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment