API tools faq
paste
grinyam

scrollImageLoad

grinyam
Apr 19th, 2016
206
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 8.35 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3.  
  4. <head>
  5.   <meta charset="utf-8">
  6.   <style>
  7.     .news-item {
  8.       width: 700px;
  9.       text-align: justify;
  10.       margin-top: 20px;
  11.     }
  12.  
  13.     .news-item .title {
  14.       font-weight: bold;
  15.       margin-bottom: 5px;
  16.     }
  17.   </style>
  18. </head>
  19.  
  20. <body>
  21.  
  22.   <p>Тексты и картинки взяты с сайта http://etoday.ru. </p>
  23.  
  24.   <h3>Все изображения с realsrc загружаются, когда становятся видимыми.</h3>
  25.  
  26.  
  27.   <div class="news-item">
  28.     <div class="title">Космопорт Америка \ Architecture</div>
  29.  
  30.     Будущее уже сейчас! Скоро фраза из фантастического фильма "флипнуть до космопорта" станет реальностью. По крайней мере вторую ее часть человечество обеспечило. В октябре состоялась официальная церемония открытия космопорта «Америка», первой в мире коммерческой
  31.     площадки для частных космических полетов. Космопорт открылся в пустыне штата Нью-Мексико. Проект был реализован английским бюро Foster and Partners. Космопорт включает в себя зал ожидания и подготовки к полетам, диспетчерский пункт и ангар. Также
  32.     обеспечена взлетно-посадочная полоса длиной в три километра.
  33.  
  34.     <div class="illustrations">
  35.       <img src="https://js.cx/lazyimg/1.gif" width="200" height="140" realsrc="https://js.cx/lazyimg/1.jpg">
  36.     </div>
  37.   </div>
  38.  
  39.   <div class="news-item">
  40.     <div class="title">Рокер и супермодель в Vogue Russia \ Celebrities</div>
  41.  
  42.     Супермодель Анна Вялицына (Anne Vyalitsyna) и музыкант Адам Ливайн (Adam Levine) снялись в ноябрьском номере Vogue Russia. Снимал их Аликс Малка (Alix Malka). Анна и Адам примерили на себя рок-н-ролльные наряды от Alexander Wang, Louis Vuitton, Alexander
  43.     McQueen, Balmain, Yves Saint Laurent, подобранные для них Катериной Мухиной.
  44.     <div class="illustrations">
  45.       <img src="https://js.cx/lazyimg/1.gif" width="200" height="259" realsrc="https://js.cx/lazyimg/2-1.jpg">
  46.       <img src="https://js.cx/lazyimg/1.gif" width="200" height="260" realsrc="https://js.cx/lazyimg/2-2.jpg">
  47.     </div>
  48.   </div>
  49.  
  50.   <div class="news-item">
  51.     <div class="title">Старость - не радость в Vogue Italia \ Fashion Photo</div>
  52.  
  53.     Стивен Мейзел (Steven Meisel) снял фотосессию для октябрьского Vogue Italia. В съемках приняли участие: Карен Элсон (Karen Elson), Джиневер ван Синус (Guinevere van Seenus), Эмма Балфур (Emma Balfour), Эн Уст (An Oost), Коринна Ингенлеф (Corinna Ingenleuf),
  54.     Танга Моро (Tanga Moreau), Кордула Рейер (Cordula Reyer), Гейл о`Нил (Gail O'Neil), Эвелин Кун (Evelyn Kuhn), Каролин де Мэгрэ (Caroline de Maigret), Дэльфин Бафор (Delfine Bafort), Кирстен Оуэн (Kirsten Owen), Гунилла Линдблад (Gunilla Lindblad).
  55.     <div class="illustrations">
  56.       <img src="https://js.cx/lazyimg/1.gif" width="341" height="474" realsrc="https://js.cx/lazyimg/3-1.jpg">
  57.       <img src="https://js.cx/lazyimg/1.gif" width="338" height="474" realsrc="https://js.cx/lazyimg/3-2.jpg">
  58.     </div>
  59.   </div>
  60.  
  61.   <div class="news-item">
  62.     <div class="title">"Вышитый рентген" Matthew Cox \ Art</div>
  63.  
  64.     Художник из Филадельфии Мэтью Кокс (Matthew Cox) создал серию работ, в которых объединены медицинский рентген и вышивка. Художник взял рентгенограммы и вышил их предполагаемое содержание частично со скелетными элементами. Получилось зловеще и интригующе.
  65.     Выставка "Вышитый рентген" будет демонстрироваться в галерее Packer/Schopf в Майами, в рамках Базельской Художественной Недели. Эта серия - только треть творческой продукции Кокса. Он также создает традиционные картины и иллюстрации.
  66.     <div class="illustrations"><img src="https://js.cx/lazyimg/1.gif" width="680" height="452" realsrc="https://js.cx/lazyimg/4.jpg"></div>
  67.   </div>
  68.  
  69.   <div class="news-item">
  70.     <div class="title">Подарочный каталог Apple 1983 \ Creative</div>
  71.  
  72.     Etoday предлагает полистать страницы подарочного каталога продукции Apple образца 1983 года. Кажется, это было так давно! Эта серия - только треть творческой продукции Кокса. Он также создает традиционные картины и иллюстрации.
  73.     <div class="illustrations"><img src="https://js.cx/lazyimg/1.gif" width="600" height="393" realsrc="https://js.cx/lazyimg/5.jpg"></div>
  74.   </div>
  75.  
  76.   <div class="news-item">
  77.     <div class="title">Винтажные открытки к празднику Halloween \ Illustrations</div>
  78.  
  79.     Занимательная коллекция старых почтовых открыток праздника Halloween. Открытки взяты из ньюйоркской публичной библиотеки и датируются примерно 1910 г.
  80.  
  81.     <div class="illustrations"><img src="https://js.cx/lazyimg/1.gif" width="680" height="433" realsrc="https://js.cx/lazyimg/6.jpg"></div>
  82.   </div>
  83.  
  84.   <div class="news-item">
  85.     <div class="title">Фотограф Emily Lee \ Photography</div>
  86.  
  87.     Молодой фотограф Эмили Ли (Emily Lee) использует фотографию, чтобы выразить свои чувства. "Когда я смотрю на жизнь через камеру, вижу все более ясно, - пишет она на своем профиле Flickr. - Фотосъемка - это искусство наблюдения." Эмили Ли - обладательница
  88.     большого таланта и умения глубоко понимать искусство, хотя учится еще только в средней школе.
  89.  
  90.     <div class="illustrations"><img src="https://js.cx/lazyimg/1.gif" width="680" height="453" realsrc="https://js.cx/lazyimg/7.jpg"></div>
  91.   </div>
  92.  
  93.   <div class="news-item">
  94.     <div class="title">Иконы моды в Fashimals \ Creative</div>
  95.  
  96.     Fashimals - tumblr-блог, посвященный иконам моды, превращенным в животных. Здесь есть Анна Винтур, Карл Лагерфельд, Терри Ричардсон, а также много других их коллег.
  97.  
  98.     <div class="illustrations"><img src="https://js.cx/lazyimg/1.gif" width="600" height="622" realsrc="https://js.cx/lazyimg/8.jpg"></div>
  99.   </div>
  100.  
  101.  
  102.   <script>
  103.  
  104.     function isVisible(elem) {
  105.  
  106.       var coords = elem.getBoundingClientRect();
  107.       var windowHeight = document.documentElement.clientHeight;
  108.       var topVisible = coords.top > 0 && coords.top < windowHeight;
  109.       var bottomVisible = coords.bottom < windowHeight && coords.bottom > 0;
  110.  
  111.       return topVisible || bottomVisible;
  112.     }
  113.  
  114.     function showVisible() {
  115.       var imgs = document.getElementsByTagName("img");
  116.       for (var i = 0; i < imgs.length; i++) {
  117.  
  118.        var img = imgs[i];
  119.        var realsrc = img.getAttribute("realsrc");
  120.  
  121.        if (!realsrc) continue;
  122.  
  123.        if (isVisible(img)) {
  124.          img.src = realsrc;
  125.          img.setAttribute("realsrc", "");
  126.        }
  127.      }
  128.    }
  129.  
  130.    window.onscroll = showVisible;
  131.    showVisible();
  132.  </script>
  133.  
  134. </body>
  135.  
  136. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!