vanilla-lazyload
Version:
A fast, lightweight script to load images as they enter the viewport. SEO friendly, it supports responsive images (both srcset + sizes and picture) and progressive JPEG
671 lines (666 loc) • 36 kB
HTML
<style>
html {
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
.horzContainer {
max-width: 100%;
overflow: auto;
display: flex;
}
.item {
min-width: 200px;
}
figure {
margin: 10px;
}
img {
width: 200px;
height: 200px;
}
</style>
<div class="horzContainer">
<figure class="item">
<img src="" alt="Row 01, col 01" data-src="https://placeholdit.imgix.net/~text?txtsize=19&txt=row_01_col_01&w=200&h=200">
<figcaption>Lorem ipsum 01</figcaption>
</figure>
<figure class="item">
<img src="" alt="Row 01, col 02" data-src="https://placeholdit.imgix.net/~text?txtsize=19&txt=row_01_col_02&w=200&h=200">
<figcaption>Lorem ipsum 02</figcaption>
</figure>
<figure class="item">
<img src="" alt="Row 01, col 03" data-src="https://placeholdit.imgix.net/~text?txtsize=19&txt=row_01_col_03&w=200&h=200">
<figcaption>Lorem ipsum 03</figcaption>
</figure>
<figure class="item">
<img src="" alt="Row 01, col 04" data-src="https://placeholdit.imgix.net/~text?txtsize=19&txt=row_01_col_04&w=200&h=200">
<figcaption>Lorem ipsum 04</figcaption>
</figure>
<figure class="item">
<img src="" alt="Row 01, col 05" data-src="https://placeholdit.imgix.net/~text?txtsize=19&txt=row_01_col_05&w=200&h=200">
<figcaption>Lorem ipsum 05</figcaption>
</figure>
<figure class="item">
<img src="" alt="Row 01, col 06" data-src="https://placeholdit.imgix.net/~text?txtsize=19&txt=row_01_col_06&w=200&h=200">
<figcaption>Lorem ipsum 06</figcaption>
</figure>
<figure class="item">
<img src="" alt="Row 01, col 07" data-src="https://placeholdit.imgix.net/~text?txtsize=19&txt=row_01_col_07&w=200&h=200">
<figcaption>Lorem ipsum 07</figcaption>
</figure>
<figure class="item">
<img src="" alt="Row 01, col 08" data-src="https://placeholdit.imgix.net/~text?txtsize=19&txt=row_01_col_08&w=200&h=200">
<figcaption>Lorem ipsum 08</figcaption>
</figure>
<figure class="item">
<img src="" alt="Row 01, col 09" data-src="https://placeholdit.imgix.net/~text?txtsize=19&txt=row_01_col_09&w=200&h=200">
<figcaption>Lorem ipsum 09</figcaption>
</figure>
<figure class="item">
<img src="" alt="Row 01, col 10" data-src="https://placeholdit.imgix.net/~text?txtsize=19&txt=row_01_col_10&w=200&h=200">
<figcaption>Lorem ipsum 10</figcaption>
</figure>
<figure class="item">
<img src="" alt="Row 01, col 11" data-src="https://placeholdit.imgix.net/~text?txtsize=19&txt=row_01_col_11&w=200&h=200">
<figcaption>Lorem ipsum 11</figcaption>
</figure>
<figure class="item">
<img src="" alt="Row 01, col 12" data-src="https://placeholdit.imgix.net/~text?txtsize=19&txt=row_01_col_12&w=200&h=200">
<figcaption>Lorem ipsum 12</figcaption>
</figure>
<figure class="item">
<img src="" alt="Row 01, col 13" data-src="https://placeholdit.imgix.net/~text?txtsize=19&txt=row_01_col_13&w=200&h=200">
<figcaption>Lorem ipsum 13</figcaption>
</figure>
<figure class="item">
<img src="" alt="Row 01, col 14" data-src="https://placeholdit.imgix.net/~text?txtsize=19&txt=row_01_col_14&w=200&h=200">
<figcaption>Lorem ipsum 14</figcaption>
</figure>
<figure class="item">
<img src="" alt="Row 01, col 15" data-src="https://placeholdit.imgix.net/~text?txtsize=19&txt=row_01_col_15&w=200&h=200">
<figcaption>Lorem ipsum 15</figcaption>
</figure>
</div>
<div class="horzContainer">
<figure class="item">
<img src="" alt="Row 02, col 01" data-src="https://placeholdit.imgix.net/~text?txtsize=19&txt=row_02_col_01&w=200&h=200">
<figcaption>Lorem ipsum 01</figcaption>
</figure>
<figure class="item">
<img src="" alt="Row 02, col 02" data-src="https://placeholdit.imgix.net/~text?txtsize=19&txt=row_02_col_02&w=200&h=200">
<figcaption>Lorem ipsum 02</figcaption>
</figure>
<figure class="item">
<img src="" alt="Row 02, col 03" data-src="https://placeholdit.imgix.net/~text?txtsize=19&txt=row_02_col_03&w=200&h=200">
<figcaption>Lorem ipsum 03</figcaption>
</figure>
<figure class="item">
<img src="" alt="Row 02, col 04" data-src="https://placeholdit.imgix.net/~text?txtsize=19&txt=row_02_col_04&w=200&h=200">
<figcaption>Lorem ipsum 04</figcaption>
</figure>
<figure class="item">
<img src="" alt="Row 02, col 05" data-src="https://placeholdit.imgix.net/~text?txtsize=19&txt=row_02_col_05&w=200&h=200">
<figcaption>Lorem ipsum 05</figcaption>
</figure>
<figure class="item">
<img src="" alt="Row 02, col 06" data-src="https://placeholdit.imgix.net/~text?txtsize=19&txt=row_02_col_06&w=200&h=200">
<figcaption>Lorem ipsum 06</figcaption>
</figure>
<figure class="item">
<img src="" alt="Row 02, col 07" data-src="https://placeholdit.imgix.net/~text?txtsize=19&txt=row_02_col_07&w=200&h=200">
<figcaption>Lorem ipsum 07</figcaption>
</figure>
<figure class="item">
<img src="" alt="Row 02, col 08" data-src="https://placeholdit.imgix.net/~text?txtsize=19&txt=row_02_col_08&w=200&h=200">
<figcaption>Lorem ipsum 08</figcaption>
</figure>
<figure class="item">
<img src="" alt="Row 02, col 09" data-src="https://placeholdit.imgix.net/~text?txtsize=19&txt=row_02_col_09&w=200&h=200">
<figcaption>Lorem ipsum 09</figcaption>
</figure>
<figure class="item">
<img src="" alt="Row 02, col 10" data-src="https://placeholdit.imgix.net/~text?txtsize=19&txt=row_02_col_10&w=200&h=200">
<figcaption>Lorem ipsum 10</figcaption>
</figure>
<figure class="item">
<img src="" alt="Row 02, col 11" data-src="https://placeholdit.imgix.net/~text?txtsize=19&txt=row_02_col_11&w=200&h=200">
<figcaption>Lorem ipsum 11</figcaption>
</figure>
<figure class="item">
<img src="" alt="Row 02, col 12" data-src="https://placeholdit.imgix.net/~text?txtsize=19&txt=row_02_col_12&w=200&h=200">
<figcaption>Lorem ipsum 12</figcaption>
</figure>
<figure class="item">
<img src="" alt="Row 02, col 13" data-src="https://placeholdit.imgix.net/~text?txtsize=19&txt=row_02_col_13&w=200&h=200">
<figcaption>Lorem ipsum 13</figcaption>
</figure>
<figure class="item">
<img src="" alt="Row 02, col 14" data-src="https://placeholdit.imgix.net/~text?txtsize=19&txt=row_02_col_14&w=200&h=200">
<figcaption>Lorem ipsum 14</figcaption>
</figure>
<figure class="item">
<img src="" alt="Row 02, col 15" data-src="https://placeholdit.imgix.net/~text?txtsize=19&txt=row_02_col_15&w=200&h=200">
<figcaption>Lorem ipsum 15</figcaption>
</figure>
</div>
<div class="horzContainer">
<figure class="item">
<img src="" alt="Row 03, col 01" data-src="https://placeholdit.imgix.net/~text?txtsize=19&txt=row_03_col_01&w=200&h=200">
<figcaption>Lorem ipsum 01</figcaption>
</figure>
<figure class="item">
<img src="" alt="Row 03, col 02" data-src="https://placeholdit.imgix.net/~text?txtsize=19&txt=row_03_col_02&w=200&h=200">
<figcaption>Lorem ipsum 02</figcaption>
</figure>
<figure class="item">
<img src="" alt="Row 03, col 03" data-src="https://placeholdit.imgix.net/~text?txtsize=19&txt=row_03_col_03&w=200&h=200">
<figcaption>Lorem ipsum 03</figcaption>
</figure>
<figure class="item">
<img src="" alt="Row 03, col 04" data-src="https://placeholdit.imgix.net/~text?txtsize=19&txt=row_03_col_04&w=200&h=200">
<figcaption>Lorem ipsum 04</figcaption>
</figure>
<figure class="item">
<img src="" alt="Row 03, col 05" data-src="https://placeholdit.imgix.net/~text?txtsize=19&txt=row_03_col_05&w=200&h=200">
<figcaption>Lorem ipsum 05</figcaption>
</figure>
<figure class="item">
<img src="" alt="Row 03, col 06" data-src="https://placeholdit.imgix.net/~text?txtsize=19&txt=row_03_col_06&w=200&h=200">
<figcaption>Lorem ipsum 06</figcaption>
</figure>
<figure class="item">
<img src="" alt="Row 03, col 07" data-src="https://placeholdit.imgix.net/~text?txtsize=19&txt=row_03_col_07&w=200&h=200">
<figcaption>Lorem ipsum 07</figcaption>
</figure>
<figure class="item">
<img src="" alt="Row 03, col 08" data-src="https://placeholdit.imgix.net/~text?txtsize=19&txt=row_03_col_08&w=200&h=200">
<figcaption>Lorem ipsum 08</figcaption>
</figure>
<figure class="item">
<img src="" alt="Row 03, col 09" data-src="https://placeholdit.imgix.net/~text?txtsize=19&txt=row_03_col_09&w=200&h=200">
<figcaption>Lorem ipsum 09</figcaption>
</figure>
<figure class="item">
<img src="" alt="Row 03, col 10" data-src="https://placeholdit.imgix.net/~text?txtsize=19&txt=row_03_col_10&w=200&h=200">
<figcaption>Lorem ipsum 10</figcaption>
</figure>
<figure class="item">
<img src="" alt="Row 03, col 11" data-src="https://placeholdit.imgix.net/~text?txtsize=19&txt=row_03_col_11&w=200&h=200">
<figcaption>Lorem ipsum 11</figcaption>
</figure>
<figure class="item">
<img src="" alt="Row 03, col 12" data-src="https://placeholdit.imgix.net/~text?txtsize=19&txt=row_03_col_12&w=200&h=200">
<figcaption>Lorem ipsum 12</figcaption>
</figure>
<figure class="item">
<img src="" alt="Row 03, col 13" data-src="https://placeholdit.imgix.net/~text?txtsize=19&txt=row_03_col_13&w=200&h=200">
<figcaption>Lorem ipsum 13</figcaption>
</figure>
<figure class="item">
<img src="" alt="Row 03, col 14" data-src="https://placeholdit.imgix.net/~text?txtsize=19&txt=row_03_col_14&w=200&h=200">
<figcaption>Lorem ipsum 14</figcaption>
</figure>
<figure class="item">
<img src="" alt="Row 03, col 15" data-src="https://placeholdit.imgix.net/~text?txtsize=19&txt=row_03_col_15&w=200&h=200">
<figcaption>Lorem ipsum 15</figcaption>
</figure>
</div>
<div class="horzContainer">
<figure class="item">
<img src="" alt="Row 04, col 01" data-src="https://placeholdit.imgix.net/~text?txtsize=19&txt=row_04_col_01&w=200&h=200">
<figcaption>Lorem ipsum 01</figcaption>
</figure>
<figure class="item">
<img src="" alt="Row 04, col 02" data-src="https://placeholdit.imgix.net/~text?txtsize=19&txt=row_04_col_02&w=200&h=200">
<figcaption>Lorem ipsum 02</figcaption>
</figure>
<figure class="item">
<img src="" alt="Row 04, col 03" data-src="https://placeholdit.imgix.net/~text?txtsize=19&txt=row_04_col_03&w=200&h=200">
<figcaption>Lorem ipsum 03</figcaption>
</figure>
<figure class="item">
<img src="" alt="Row 04, col 04" data-src="https://placeholdit.imgix.net/~text?txtsize=19&txt=row_04_col_04&w=200&h=200">
<figcaption>Lorem ipsum 04</figcaption>
</figure>
<figure class="item">
<img src="" alt="Row 04, col 05" data-src="https://placeholdit.imgix.net/~text?txtsize=19&txt=row_04_col_05&w=200&h=200">
<figcaption>Lorem ipsum 05</figcaption>
</figure>
<figure class="item">
<img src="" alt="Row 04, col 06" data-src="https://placeholdit.imgix.net/~text?txtsize=19&txt=row_04_col_06&w=200&h=200">
<figcaption>Lorem ipsum 06</figcaption>
</figure>
<figure class="item">
<img src="" alt="Row 04, col 07" data-src="https://placeholdit.imgix.net/~text?txtsize=19&txt=row_04_col_07&w=200&h=200">
<figcaption>Lorem ipsum 07</figcaption>
</figure>
<figure class="item">
<img src="" alt="Row 04, col 08" data-src="https://placeholdit.imgix.net/~text?txtsize=19&txt=row_04_col_08&w=200&h=200">
<figcaption>Lorem ipsum 08</figcaption>
</figure>
<figure class="item">
<img src="" alt="Row 04, col 09" data-src="https://placeholdit.imgix.net/~text?txtsize=19&txt=row_04_col_09&w=200&h=200">
<figcaption>Lorem ipsum 09</figcaption>
</figure>
<figure class="item">
<img src="" alt="Row 04, col 10" data-src="https://placeholdit.imgix.net/~text?txtsize=19&txt=row_04_col_10&w=200&h=200">
<figcaption>Lorem ipsum 10</figcaption>
</figure>
<figure class="item">
<img src="" alt="Row 04, col 11" data-src="https://placeholdit.imgix.net/~text?txtsize=19&txt=row_04_col_11&w=200&h=200">
<figcaption>Lorem ipsum 11</figcaption>
</figure>
<figure class="item">
<img src="" alt="Row 04, col 12" data-src="https://placeholdit.imgix.net/~text?txtsize=19&txt=row_04_col_12&w=200&h=200">
<figcaption>Lorem ipsum 12</figcaption>
</figure>
<figure class="item">
<img src="" alt="Row 04, col 13" data-src="https://placeholdit.imgix.net/~text?txtsize=19&txt=row_04_col_13&w=200&h=200">
<figcaption>Lorem ipsum 13</figcaption>
</figure>
<figure class="item">
<img src="" alt="Row 04, col 14" data-src="https://placeholdit.imgix.net/~text?txtsize=19&txt=row_04_col_14&w=200&h=200">
<figcaption>Lorem ipsum 14</figcaption>
</figure>
<figure class="item">
<img src="" alt="Row 04, col 15" data-src="https://placeholdit.imgix.net/~text?txtsize=19&txt=row_04_col_15&w=200&h=200">
<figcaption>Lorem ipsum 15</figcaption>
</figure>
</div>
<div class="horzContainer">
<figure class="item">
<img src="" alt="Row 05, col 01" data-src="https://placeholdit.imgix.net/~text?txtsize=19&txt=row_05_col_01&w=200&h=200">
<figcaption>Lorem ipsum 01</figcaption>
</figure>
<figure class="item">
<img src="" alt="Row 05, col 02" data-src="https://placeholdit.imgix.net/~text?txtsize=19&txt=row_05_col_02&w=200&h=200">
<figcaption>Lorem ipsum 02</figcaption>
</figure>
<figure class="item">
<img src="" alt="Row 05, col 03" data-src="https://placeholdit.imgix.net/~text?txtsize=19&txt=row_05_col_03&w=200&h=200">
<figcaption>Lorem ipsum 03</figcaption>
</figure>
<figure class="item">
<img src="" alt="Row 05, col 04" data-src="https://placeholdit.imgix.net/~text?txtsize=19&txt=row_05_col_04&w=200&h=200">
<figcaption>Lorem ipsum 04</figcaption>
</figure>
<figure class="item">
<img src="" alt="Row 05, col 05" data-src="https://placeholdit.imgix.net/~text?txtsize=19&txt=row_05_col_05&w=200&h=200">
<figcaption>Lorem ipsum 05</figcaption>
</figure>
<figure class="item">
<img src="" alt="Row 05, col 06" data-src="https://placeholdit.imgix.net/~text?txtsize=19&txt=row_05_col_06&w=200&h=200">
<figcaption>Lorem ipsum 06</figcaption>
</figure>
<figure class="item">
<img src="" alt="Row 05, col 07" data-src="https://placeholdit.imgix.net/~text?txtsize=19&txt=row_05_col_07&w=200&h=200">
<figcaption>Lorem ipsum 07</figcaption>
</figure>
<figure class="item">
<img src="" alt="Row 05, col 08" data-src="https://placeholdit.imgix.net/~text?txtsize=19&txt=row_05_col_08&w=200&h=200">
<figcaption>Lorem ipsum 08</figcaption>
</figure>
<figure class="item">
<img src="" alt="Row 05, col 09" data-src="https://placeholdit.imgix.net/~text?txtsize=19&txt=row_05_col_09&w=200&h=200">
<figcaption>Lorem ipsum 09</figcaption>
</figure>
<figure class="item">
<img src="" alt="Row 05, col 10" data-src="https://placeholdit.imgix.net/~text?txtsize=19&txt=row_05_col_10&w=200&h=200">
<figcaption>Lorem ipsum 10</figcaption>
</figure>
<figure class="item">
<img src="" alt="Row 05, col 11" data-src="https://placeholdit.imgix.net/~text?txtsize=19&txt=row_05_col_11&w=200&h=200">
<figcaption>Lorem ipsum 11</figcaption>
</figure>
<figure class="item">
<img src="" alt="Row 05, col 12" data-src="https://placeholdit.imgix.net/~text?txtsize=19&txt=row_05_col_12&w=200&h=200">
<figcaption>Lorem ipsum 12</figcaption>
</figure>
<figure class="item">
<img src="" alt="Row 05, col 13" data-src="https://placeholdit.imgix.net/~text?txtsize=19&txt=row_05_col_13&w=200&h=200">
<figcaption>Lorem ipsum 13</figcaption>
</figure>
<figure class="item">
<img src="" alt="Row 05, col 14" data-src="https://placeholdit.imgix.net/~text?txtsize=19&txt=row_05_col_14&w=200&h=200">
<figcaption>Lorem ipsum 14</figcaption>
</figure>
<figure class="item">
<img src="" alt="Row 05, col 15" data-src="https://placeholdit.imgix.net/~text?txtsize=19&txt=row_05_col_15&w=200&h=200">
<figcaption>Lorem ipsum 15</figcaption>
</figure>
</div>
<div class="horzContainer">
<figure class="item">
<img src="" alt="Row 06, col 01" data-src="https://placeholdit.imgix.net/~text?txtsize=19&txt=row_06_col_01&w=200&h=200">
<figcaption>Lorem ipsum 01</figcaption>
</figure>
<figure class="item">
<img src="" alt="Row 06, col 02" data-src="https://placeholdit.imgix.net/~text?txtsize=19&txt=row_06_col_02&w=200&h=200">
<figcaption>Lorem ipsum 02</figcaption>
</figure>
<figure class="item">
<img src="" alt="Row 06, col 03" data-src="https://placeholdit.imgix.net/~text?txtsize=19&txt=row_06_col_03&w=200&h=200">
<figcaption>Lorem ipsum 03</figcaption>
</figure>
<figure class="item">
<img src="" alt="Row 06, col 04" data-src="https://placeholdit.imgix.net/~text?txtsize=19&txt=row_06_col_04&w=200&h=200">
<figcaption>Lorem ipsum 04</figcaption>
</figure>
<figure class="item">
<img src="" alt="Row 06, col 05" data-src="https://placeholdit.imgix.net/~text?txtsize=19&txt=row_06_col_05&w=200&h=200">
<figcaption>Lorem ipsum 05</figcaption>
</figure>
<figure class="item">
<img src="" alt="Row 06, col 06" data-src="https://placeholdit.imgix.net/~text?txtsize=19&txt=row_06_col_06&w=200&h=200">
<figcaption>Lorem ipsum 06</figcaption>
</figure>
<figure class="item">
<img src="" alt="Row 06, col 07" data-src="https://placeholdit.imgix.net/~text?txtsize=19&txt=row_06_col_07&w=200&h=200">
<figcaption>Lorem ipsum 07</figcaption>
</figure>
<figure class="item">
<img src="" alt="Row 06, col 08" data-src="https://placeholdit.imgix.net/~text?txtsize=19&txt=row_06_col_08&w=200&h=200">
<figcaption>Lorem ipsum 08</figcaption>
</figure>
<figure class="item">
<img src="" alt="Row 06, col 09" data-src="https://placeholdit.imgix.net/~text?txtsize=19&txt=row_06_col_09&w=200&h=200">
<figcaption>Lorem ipsum 09</figcaption>
</figure>
<figure class="item">
<img src="" alt="Row 06, col 10" data-src="https://placeholdit.imgix.net/~text?txtsize=19&txt=row_06_col_10&w=200&h=200">
<figcaption>Lorem ipsum 10</figcaption>
</figure>
<figure class="item">
<img src="" alt="Row 06, col 11" data-src="https://placeholdit.imgix.net/~text?txtsize=19&txt=row_06_col_11&w=200&h=200">
<figcaption>Lorem ipsum 11</figcaption>
</figure>
<figure class="item">
<img src="" alt="Row 06, col 12" data-src="https://placeholdit.imgix.net/~text?txtsize=19&txt=row_06_col_12&w=200&h=200">
<figcaption>Lorem ipsum 12</figcaption>
</figure>
<figure class="item">
<img src="" alt="Row 06, col 13" data-src="https://placeholdit.imgix.net/~text?txtsize=19&txt=row_06_col_13&w=200&h=200">
<figcaption>Lorem ipsum 13</figcaption>
</figure>
<figure class="item">
<img src="" alt="Row 06, col 14" data-src="https://placeholdit.imgix.net/~text?txtsize=19&txt=row_06_col_14&w=200&h=200">
<figcaption>Lorem ipsum 14</figcaption>
</figure>
<figure class="item">
<img src="" alt="Row 06, col 15" data-src="https://placeholdit.imgix.net/~text?txtsize=19&txt=row_06_col_15&w=200&h=200">
<figcaption>Lorem ipsum 15</figcaption>
</figure>
</div>
<div class="horzContainer">
<figure class="item">
<img src="" alt="Row 07, col 01" data-src="https://placeholdit.imgix.net/~text?txtsize=19&txt=row_07_col_01&w=200&h=200">
<figcaption>Lorem ipsum 01</figcaption>
</figure>
<figure class="item">
<img src="" alt="Row 07, col 02" data-src="https://placeholdit.imgix.net/~text?txtsize=19&txt=row_07_col_02&w=200&h=200">
<figcaption>Lorem ipsum 02</figcaption>
</figure>
<figure class="item">
<img src="" alt="Row 07, col 03" data-src="https://placeholdit.imgix.net/~text?txtsize=19&txt=row_07_col_03&w=200&h=200">
<figcaption>Lorem ipsum 03</figcaption>
</figure>
<figure class="item">
<img src="" alt="Row 07, col 04" data-src="https://placeholdit.imgix.net/~text?txtsize=19&txt=row_07_col_04&w=200&h=200">
<figcaption>Lorem ipsum 04</figcaption>
</figure>
<figure class="item">
<img src="" alt="Row 07, col 05" data-src="https://placeholdit.imgix.net/~text?txtsize=19&txt=row_07_col_05&w=200&h=200">
<figcaption>Lorem ipsum 05</figcaption>
</figure>
<figure class="item">
<img src="" alt="Row 07, col 06" data-src="https://placeholdit.imgix.net/~text?txtsize=19&txt=row_07_col_06&w=200&h=200">
<figcaption>Lorem ipsum 06</figcaption>
</figure>
<figure class="item">
<img src="" alt="Row 07, col 07" data-src="https://placeholdit.imgix.net/~text?txtsize=19&txt=row_07_col_07&w=200&h=200">
<figcaption>Lorem ipsum 07</figcaption>
</figure>
<figure class="item">
<img src="" alt="Row 07, col 08" data-src="https://placeholdit.imgix.net/~text?txtsize=19&txt=row_07_col_08&w=200&h=200">
<figcaption>Lorem ipsum 08</figcaption>
</figure>
<figure class="item">
<img src="" alt="Row 07, col 09" data-src="https://placeholdit.imgix.net/~text?txtsize=19&txt=row_07_col_09&w=200&h=200">
<figcaption>Lorem ipsum 09</figcaption>
</figure>
<figure class="item">
<img src="" alt="Row 07, col 10" data-src="https://placeholdit.imgix.net/~text?txtsize=19&txt=row_07_col_10&w=200&h=200">
<figcaption>Lorem ipsum 10</figcaption>
</figure>
<figure class="item">
<img src="" alt="Row 07, col 11" data-src="https://placeholdit.imgix.net/~text?txtsize=19&txt=row_07_col_11&w=200&h=200">
<figcaption>Lorem ipsum 11</figcaption>
</figure>
<figure class="item">
<img src="" alt="Row 07, col 12" data-src="https://placeholdit.imgix.net/~text?txtsize=19&txt=row_07_col_12&w=200&h=200">
<figcaption>Lorem ipsum 12</figcaption>
</figure>
<figure class="item">
<img src="" alt="Row 07, col 13" data-src="https://placeholdit.imgix.net/~text?txtsize=19&txt=row_07_col_13&w=200&h=200">
<figcaption>Lorem ipsum 13</figcaption>
</figure>
<figure class="item">
<img src="" alt="Row 07, col 14" data-src="https://placeholdit.imgix.net/~text?txtsize=19&txt=row_07_col_14&w=200&h=200">
<figcaption>Lorem ipsum 14</figcaption>
</figure>
<figure class="item">
<img src="" alt="Row 07, col 15" data-src="https://placeholdit.imgix.net/~text?txtsize=19&txt=row_07_col_15&w=200&h=200">
<figcaption>Lorem ipsum 15</figcaption>
</figure>
</div>
<div class="horzContainer">
<figure class="item">
<img src="" alt="Row 08, col 01" data-src="https://placeholdit.imgix.net/~text?txtsize=19&txt=row_08_col_01&w=200&h=200">
<figcaption>Lorem ipsum 01</figcaption>
</figure>
<figure class="item">
<img src="" alt="Row 08, col 02" data-src="https://placeholdit.imgix.net/~text?txtsize=19&txt=row_08_col_02&w=200&h=200">
<figcaption>Lorem ipsum 02</figcaption>
</figure>
<figure class="item">
<img src="" alt="Row 08, col 03" data-src="https://placeholdit.imgix.net/~text?txtsize=19&txt=row_08_col_03&w=200&h=200">
<figcaption>Lorem ipsum 03</figcaption>
</figure>
<figure class="item">
<img src="" alt="Row 08, col 04" data-src="https://placeholdit.imgix.net/~text?txtsize=19&txt=row_08_col_04&w=200&h=200">
<figcaption>Lorem ipsum 04</figcaption>
</figure>
<figure class="item">
<img src="" alt="Row 08, col 05" data-src="https://placeholdit.imgix.net/~text?txtsize=19&txt=row_08_col_05&w=200&h=200">
<figcaption>Lorem ipsum 05</figcaption>
</figure>
<figure class="item">
<img src="" alt="Row 08, col 06" data-src="https://placeholdit.imgix.net/~text?txtsize=19&txt=row_08_col_06&w=200&h=200">
<figcaption>Lorem ipsum 06</figcaption>
</figure>
<figure class="item">
<img src="" alt="Row 08, col 07" data-src="https://placeholdit.imgix.net/~text?txtsize=19&txt=row_08_col_07&w=200&h=200">
<figcaption>Lorem ipsum 07</figcaption>
</figure>
<figure class="item">
<img src="" alt="Row 08, col 08" data-src="https://placeholdit.imgix.net/~text?txtsize=19&txt=row_08_col_08&w=200&h=200">
<figcaption>Lorem ipsum 08</figcaption>
</figure>
<figure class="item">
<img src="" alt="Row 08, col 09" data-src="https://placeholdit.imgix.net/~text?txtsize=19&txt=row_08_col_09&w=200&h=200">
<figcaption>Lorem ipsum 09</figcaption>
</figure>
<figure class="item">
<img src="" alt="Row 08, col 10" data-src="https://placeholdit.imgix.net/~text?txtsize=19&txt=row_08_col_10&w=200&h=200">
<figcaption>Lorem ipsum 10</figcaption>
</figure>
<figure class="item">
<img src="" alt="Row 08, col 11" data-src="https://placeholdit.imgix.net/~text?txtsize=19&txt=row_08_col_11&w=200&h=200">
<figcaption>Lorem ipsum 11</figcaption>
</figure>
<figure class="item">
<img src="" alt="Row 08, col 12" data-src="https://placeholdit.imgix.net/~text?txtsize=19&txt=row_08_col_12&w=200&h=200">
<figcaption>Lorem ipsum 12</figcaption>
</figure>
<figure class="item">
<img src="" alt="Row 08, col 13" data-src="https://placeholdit.imgix.net/~text?txtsize=19&txt=row_08_col_13&w=200&h=200">
<figcaption>Lorem ipsum 13</figcaption>
</figure>
<figure class="item">
<img src="" alt="Row 08, col 14" data-src="https://placeholdit.imgix.net/~text?txtsize=19&txt=row_08_col_14&w=200&h=200">
<figcaption>Lorem ipsum 14</figcaption>
</figure>
<figure class="item">
<img src="" alt="Row 08, col 15" data-src="https://placeholdit.imgix.net/~text?txtsize=19&txt=row_08_col_15&w=200&h=200">
<figcaption>Lorem ipsum 15</figcaption>
</figure>
</div>
<div class="horzContainer">
<figure class="item">
<img src="" alt="Row 09, col 01" data-src="https://placeholdit.imgix.net/~text?txtsize=19&txt=row_09_col_01&w=200&h=200">
<figcaption>Lorem ipsum 01</figcaption>
</figure>
<figure class="item">
<img src="" alt="Row 09, col 02" data-src="https://placeholdit.imgix.net/~text?txtsize=19&txt=row_09_col_02&w=200&h=200">
<figcaption>Lorem ipsum 02</figcaption>
</figure>
<figure class="item">
<img src="" alt="Row 09, col 03" data-src="https://placeholdit.imgix.net/~text?txtsize=19&txt=row_09_col_03&w=200&h=200">
<figcaption>Lorem ipsum 03</figcaption>
</figure>
<figure class="item">
<img src="" alt="Row 09, col 04" data-src="https://placeholdit.imgix.net/~text?txtsize=19&txt=row_09_col_04&w=200&h=200">
<figcaption>Lorem ipsum 04</figcaption>
</figure>
<figure class="item">
<img src="" alt="Row 09, col 05" data-src="https://placeholdit.imgix.net/~text?txtsize=19&txt=row_09_col_05&w=200&h=200">
<figcaption>Lorem ipsum 05</figcaption>
</figure>
<figure class="item">
<img src="" alt="Row 09, col 06" data-src="https://placeholdit.imgix.net/~text?txtsize=19&txt=row_09_col_06&w=200&h=200">
<figcaption>Lorem ipsum 06</figcaption>
</figure>
<figure class="item">
<img src="" alt="Row 09, col 07" data-src="https://placeholdit.imgix.net/~text?txtsize=19&txt=row_09_col_07&w=200&h=200">
<figcaption>Lorem ipsum 07</figcaption>
</figure>
<figure class="item">
<img src="" alt="Row 09, col 08" data-src="https://placeholdit.imgix.net/~text?txtsize=19&txt=row_09_col_08&w=200&h=200">
<figcaption>Lorem ipsum 08</figcaption>
</figure>
<figure class="item">
<img src="" alt="Row 09, col 09" data-src="https://placeholdit.imgix.net/~text?txtsize=19&txt=row_09_col_09&w=200&h=200">
<figcaption>Lorem ipsum 09</figcaption>
</figure>
<figure class="item">
<img src="" alt="Row 09, col 10" data-src="https://placeholdit.imgix.net/~text?txtsize=19&txt=row_09_col_10&w=200&h=200">
<figcaption>Lorem ipsum 10</figcaption>
</figure>
<figure class="item">
<img src="" alt="Row 09, col 11" data-src="https://placeholdit.imgix.net/~text?txtsize=19&txt=row_09_col_11&w=200&h=200">
<figcaption>Lorem ipsum 11</figcaption>
</figure>
<figure class="item">
<img src="" alt="Row 09, col 12" data-src="https://placeholdit.imgix.net/~text?txtsize=19&txt=row_09_col_12&w=200&h=200">
<figcaption>Lorem ipsum 12</figcaption>
</figure>
<figure class="item">
<img src="" alt="Row 09, col 13" data-src="https://placeholdit.imgix.net/~text?txtsize=19&txt=row_09_col_13&w=200&h=200">
<figcaption>Lorem ipsum 13</figcaption>
</figure>
<figure class="item">
<img src="" alt="Row 09, col 14" data-src="https://placeholdit.imgix.net/~text?txtsize=19&txt=row_09_col_14&w=200&h=200">
<figcaption>Lorem ipsum 14</figcaption>
</figure>
<figure class="item">
<img src="" alt="Row 09, col 15" data-src="https://placeholdit.imgix.net/~text?txtsize=19&txt=row_09_col_15&w=200&h=200">
<figcaption>Lorem ipsum 15</figcaption>
</figure>
</div>
<div class="horzContainer">
<figure class="item">
<img src="" alt="Row 10, col 01" data-src="https://placeholdit.imgix.net/~text?txtsize=19&txt=row_10_col_01&w=200&h=200">
<figcaption>Lorem ipsum 01</figcaption>
</figure>
<figure class="item">
<img src="" alt="Row 10, col 02" data-src="https://placeholdit.imgix.net/~text?txtsize=19&txt=row_10_col_02&w=200&h=200">
<figcaption>Lorem ipsum 02</figcaption>
</figure>
<figure class="item">
<img src="" alt="Row 10, col 03" data-src="https://placeholdit.imgix.net/~text?txtsize=19&txt=row_10_col_03&w=200&h=200">
<figcaption>Lorem ipsum 03</figcaption>
</figure>
<figure class="item">
<img src="" alt="Row 10, col 04" data-src="https://placeholdit.imgix.net/~text?txtsize=19&txt=row_10_col_04&w=200&h=200">
<figcaption>Lorem ipsum 04</figcaption>
</figure>
<figure class="item">
<img src="" alt="Row 10, col 05" data-src="https://placeholdit.imgix.net/~text?txtsize=19&txt=row_10_col_05&w=200&h=200">
<figcaption>Lorem ipsum 05</figcaption>
</figure>
<figure class="item">
<img src="" alt="Row 10, col 06" data-src="https://placeholdit.imgix.net/~text?txtsize=19&txt=row_10_col_06&w=200&h=200">
<figcaption>Lorem ipsum 06</figcaption>
</figure>
<figure class="item">
<img src="" alt="Row 10, col 07" data-src="https://placeholdit.imgix.net/~text?txtsize=19&txt=row_10_col_07&w=200&h=200">
<figcaption>Lorem ipsum 07</figcaption>
</figure>
<figure class="item">
<img src="" alt="Row 10, col 08" data-src="https://placeholdit.imgix.net/~text?txtsize=19&txt=row_10_col_08&w=200&h=200">
<figcaption>Lorem ipsum 08</figcaption>
</figure>
<figure class="item">
<img src="" alt="Row 10, col 10" data-src="https://placeholdit.imgix.net/~text?txtsize=19&txt=row_10_col_10&w=200&h=200">
<figcaption>Lorem ipsum 09</figcaption>
</figure>
<figure class="item">
<img src="" alt="Row 10, col 10" data-src="https://placeholdit.imgix.net/~text?txtsize=19&txt=row_10_col_10&w=200&h=200">
<figcaption>Lorem ipsum 10</figcaption>
</figure>
<figure class="item">
<img src="" alt="Row 10, col 11" data-src="https://placeholdit.imgix.net/~text?txtsize=19&txt=row_10_col_11&w=200&h=200">
<figcaption>Lorem ipsum 11</figcaption>
</figure>
<figure class="item">
<img src="" alt="Row 10, col 12" data-src="https://placeholdit.imgix.net/~text?txtsize=19&txt=row_10_col_12&w=200&h=200">
<figcaption>Lorem ipsum 12</figcaption>
</figure>
<figure class="item">
<img src="" alt="Row 10, col 13" data-src="https://placeholdit.imgix.net/~text?txtsize=19&txt=row_10_col_13&w=200&h=200">
<figcaption>Lorem ipsum 13</figcaption>
</figure>
<figure class="item">
<img src="" alt="Row 10, col 14" data-src="https://placeholdit.imgix.net/~text?txtsize=19&txt=row_10_col_14&w=200&h=200">
<figcaption>Lorem ipsum 14</figcaption>
</figure>
<figure class="item">
<img src="" alt="Row 10, col 15" data-src="https://placeholdit.imgix.net/~text?txtsize=19&txt=row_10_col_15&w=200&h=200">
<figcaption>Lorem ipsum 15</figcaption>
</figure>
</div>
<script src="../dist/lazyload.min.js"></script>
<script>
(function() {
var lazyLoadInstances = [];
// The "lazyLazy" instance of lazyload is used (kinda improperly)
// to check when the .horzContainer divs enter the viewport
var lazyLazy = new LazyLoad({
elements_selector: ".horzContainer",
// When the .horzContainer div enters the viewport...
callback_set: function(el) {
// ...instantiate a new LazyLoad on it
var oneLL = new LazyLoad({
container: el
});
// Optionally push it in the lazyLoadInstances
// array to keep track of the instances
lazyLoadInstances.push(oneLL);
}
});
})();
</script>