<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8" /> <title> Lazyly load lazyload - Lazyload demos </title> <meta name="viewport" content="width=device-width, initial-scale=1" /> <style> html { box-sizing: border-box; } *, *:before, *:after { box-sizing: inherit; } .horizContainer { max-width: 100%; overflow: auto; display: flex; } .item { min-width: 200px; } .item > img { width: 200px; height: 200px; } figure { margin: 10px; } img { display: block; width: 200px; height: 200px; } img:not([src]) { visibility: hidden; } </style> </head> <body> <h1>Lazyly load lazyload demo</h1> <div class="horizContainer"> <figure class="item"> <img alt="Row 01, col 01" src="https://via.placeholder.com/200x200?text=row_01_col_01" /> <figcaption>Lorem ipsum 01</figcaption> </figure> <figure class="item"> <img alt="Row 01, col 02" src="https://via.placeholder.com/200x200?text=row_01_col_02" /> <figcaption>Lorem ipsum 02</figcaption> </figure> <figure class="item"> <img alt="Row 01, col 03" class="lazy" data-src="https://via.placeholder.com/200x200?text=row_01_col_03" /> <figcaption>Lorem ipsum 03</figcaption> </figure> <figure class="item"> <img alt="Row 01, col 04" class="lazy" data-src="https://via.placeholder.com/200x200?text=row_01_col_04" /> <figcaption>Lorem ipsum 04</figcaption> </figure> <figure class="item"> <img alt="Row 01, col 05" class="lazy" data-src="https://via.placeholder.com/200x200?text=row_01_col_05" /> <figcaption>Lorem ipsum 05</figcaption> </figure> <figure class="item"> <img alt="Row 01, col 06" class="lazy" data-src="https://via.placeholder.com/200x200?text=row_01_col_06" /> <figcaption>Lorem ipsum 06</figcaption> </figure> <figure class="item"> <img alt="Row 01, col 07" class="lazy" data-src="https://via.placeholder.com/200x200?text=row_01_col_07" /> <figcaption>Lorem ipsum 07</figcaption> </figure> <figure class="item"> <img alt="Row 01, col 08" class="lazy" data-src="https://via.placeholder.com/200x200?text=row_01_col_08" /> <figcaption>Lorem ipsum 08</figcaption> </figure> <figure class="item"> <img alt="Row 01, col 09" class="lazy" data-src="https://via.placeholder.com/200x200?text=row_01_col_09" /> <figcaption>Lorem ipsum 09</figcaption> </figure> <figure class="item"> <img alt="Row 01, col 10" class="lazy" data-src="https://via.placeholder.com/200x200?text=row_01_col_10" /> <figcaption>Lorem ipsum 10</figcaption> </figure> <figure class="item"> <img alt="Row 01, col 11" class="lazy" data-src="https://via.placeholder.com/200x200?text=row_01_col_11" /> <figcaption>Lorem ipsum 11</figcaption> </figure> <figure class="item"> <img alt="Row 01, col 12" class="lazy" data-src="https://via.placeholder.com/200x200?text=row_01_col_12" /> <figcaption>Lorem ipsum 12</figcaption> </figure> <figure class="item"> <img alt="Row 01, col 13" class="lazy" data-src="https://via.placeholder.com/200x200?text=row_01_col_13" /> <figcaption>Lorem ipsum 13</figcaption> </figure> <figure class="item"> <img alt="Row 01, col 14" class="lazy" data-src="https://via.placeholder.com/200x200?text=row_01_col_14" /> <figcaption>Lorem ipsum 14</figcaption> </figure> <figure class="item"> <img alt="Row 01, col 15" class="lazy" data-src="https://via.placeholder.com/200x200?text=row_01_col_15" /> <figcaption>Lorem ipsum 15</figcaption> </figure> </div> <div class="horizContainer"> <figure class="item"> <img alt="Row 02, col 01" src="https://via.placeholder.com/200x200?text=row_02_col_01" /> <figcaption>Lorem ipsum 01</figcaption> </figure> <figure class="item"> <img alt="Row 02, col 02" src="https://via.placeholder.com/200x200?text=row_02_col_02" /> <figcaption>Lorem ipsum 02</figcaption> </figure> <figure class="item"> <img alt="Row 02, col 03" class="lazy" data-src="https://via.placeholder.com/200x200?text=row_02_col_03" /> <figcaption>Lorem ipsum 03</figcaption> </figure> <figure class="item"> <img alt="Row 02, col 04" class="lazy" data-src="https://via.placeholder.com/200x200?text=row_02_col_04" /> <figcaption>Lorem ipsum 04</figcaption> </figure> <figure class="item"> <img alt="Row 02, col 05" class="lazy" data-src="https://via.placeholder.com/200x200?text=row_02_col_05" /> <figcaption>Lorem ipsum 05</figcaption> </figure> <figure class="item"> <img alt="Row 02, col 06" class="lazy" data-src="https://via.placeholder.com/200x200?text=row_02_col_06" /> <figcaption>Lorem ipsum 06</figcaption> </figure> <figure class="item"> <img alt="Row 02, col 07" class="lazy" data-src="https://via.placeholder.com/200x200?text=row_02_col_07" /> <figcaption>Lorem ipsum 07</figcaption> </figure> <figure class="item"> <img alt="Row 02, col 08" class="lazy" data-src="https://via.placeholder.com/200x200?text=row_02_col_08" /> <figcaption>Lorem ipsum 08</figcaption> </figure> <figure class="item"> <img alt="Row 02, col 09" class="lazy" data-src="https://via.placeholder.com/200x200?text=row_02_col_09" /> <figcaption>Lorem ipsum 09</figcaption> </figure> <figure class="item"> <img alt="Row 02, col 10" class="lazy" data-src="https://via.placeholder.com/200x200?text=row_02_col_10" /> <figcaption>Lorem ipsum 10</figcaption> </figure> <figure class="item"> <img alt="Row 02, col 11" class="lazy" data-src="https://via.placeholder.com/200x200?text=row_02_col_11" /> <figcaption>Lorem ipsum 11</figcaption> </figure> <figure class="item"> <img alt="Row 02, col 12" class="lazy" data-src="https://via.placeholder.com/200x200?text=row_02_col_12" /> <figcaption>Lorem ipsum 12</figcaption> </figure> <figure class="item"> <img alt="Row 02, col 13" class="lazy" data-src="https://via.placeholder.com/200x200?text=row_02_col_13" /> <figcaption>Lorem ipsum 13</figcaption> </figure> <figure class="item"> <img alt="Row 02, col 14" class="lazy" data-src="https://via.placeholder.com/200x200?text=row_02_col_14" /> <figcaption>Lorem ipsum 14</figcaption> </figure> <figure class="item"> <img alt="Row 02, col 15" class="lazy" data-src="https://via.placeholder.com/200x200?text=row_02_col_15" /> <figcaption>Lorem ipsum 15</figcaption> </figure> </div> <div class="horizContainer"> <figure class="item"> <img alt="Row 03, col 01" class="lazy" data-src="https://via.placeholder.com/200x200?text=row_03_col_01" /> <figcaption>Lorem ipsum 01</figcaption> </figure> <figure class="item"> <img alt="Row 03, col 02" class="lazy" data-src="https://via.placeholder.com/200x200?text=row_03_col_02" /> <figcaption>Lorem ipsum 02</figcaption> </figure> <figure class="item"> <img alt="Row 03, col 03" class="lazy" data-src="https://via.placeholder.com/200x200?text=row_03_col_03" /> <figcaption>Lorem ipsum 03</figcaption> </figure> <figure class="item"> <img alt="Row 03, col 04" class="lazy" data-src="https://via.placeholder.com/200x200?text=row_03_col_04" /> <figcaption>Lorem ipsum 04</figcaption> </figure> <figure class="item"> <img alt="Row 03, col 05" class="lazy" data-src="https://via.placeholder.com/200x200?text=row_03_col_05" /> <figcaption>Lorem ipsum 05</figcaption> </figure> <figure class="item"> <img alt="Row 03, col 06" class="lazy" data-src="https://via.placeholder.com/200x200?text=row_03_col_06" /> <figcaption>Lorem ipsum 06</figcaption> </figure> <figure class="item"> <img alt="Row 03, col 07" class="lazy" data-src="https://via.placeholder.com/200x200?text=row_03_col_07" /> <figcaption>Lorem ipsum 07</figcaption> </figure> <figure class="item"> <img alt="Row 03, col 08" class="lazy" data-src="https://via.placeholder.com/200x200?text=row_03_col_08" /> <figcaption>Lorem ipsum 08</figcaption> </figure> <figure class="item"> <img alt="Row 03, col 09" class="lazy" data-src="https://via.placeholder.com/200x200?text=row_03_col_09" /> <figcaption>Lorem ipsum 09</figcaption> </figure> <figure class="item"> <img alt="Row 03, col 10" class="lazy" data-src="https://via.placeholder.com/200x200?text=row_03_col_10" /> <figcaption>Lorem ipsum 10</figcaption> </figure> <figure class="item"> <img alt="Row 03, col 11" class="lazy" data-src="https://via.placeholder.com/200x200?text=row_03_col_11" /> <figcaption>Lorem ipsum 11</figcaption> </figure> <figure class="item"> <img alt="Row 03, col 12" class="lazy" data-src="https://via.placeholder.com/200x200?text=row_03_col_12" /> <figcaption>Lorem ipsum 12</figcaption> </figure> <figure class="item"> <img alt="Row 03, col 13" class="lazy" data-src="https://via.placeholder.com/200x200?text=row_03_col_13" /> <figcaption>Lorem ipsum 13</figcaption> </figure> <figure class="item"> <img alt="Row 03, col 14" class="lazy" data-src="https://via.placeholder.com/200x200?text=row_03_col_14" /> <figcaption>Lorem ipsum 14</figcaption> </figure> <figure class="item"> <img alt="Row 03, col 15" class="lazy" data-src="https://via.placeholder.com/200x200?text=row_03_col_15" /> <figcaption>Lorem ipsum 15</figcaption> </figure> </div> <div class="horizContainer"> <figure class="item"> <img alt="Row 04, col 01" class="lazy" data-src="https://via.placeholder.com/200x200?text=row_04_col_01" /> <figcaption>Lorem ipsum 01</figcaption> </figure> <figure class="item"> <img alt="Row 04, col 02" class="lazy" data-src="https://via.placeholder.com/200x200?text=row_04_col_02" /> <figcaption>Lorem ipsum 02</figcaption> </figure> <figure class="item"> <img alt="Row 04, col 03" class="lazy" data-src="https://via.placeholder.com/200x200?text=row_04_col_03" /> <figcaption>Lorem ipsum 03</figcaption> </figure> <figure class="item"> <img alt="Row 04, col 04" class="lazy" data-src="https://via.placeholder.com/200x200?text=row_04_col_04" /> <figcaption>Lorem ipsum 04</figcaption> </figure> <figure class="item"> <img alt="Row 04, col 05" class="lazy" data-src="https://via.placeholder.com/200x200?text=row_04_col_05" /> <figcaption>Lorem ipsum 05</figcaption> </figure> <figure class="item"> <img alt="Row 04, col 06" class="lazy" data-src="https://via.placeholder.com/200x200?text=row_04_col_06" /> <figcaption>Lorem ipsum 06</figcaption> </figure> <figure class="item"> <img alt="Row 04, col 07" class="lazy" data-src="https://via.placeholder.com/200x200?text=row_04_col_07" /> <figcaption>Lorem ipsum 07</figcaption> </figure> <figure class="item"> <img alt="Row 04, col 08" class="lazy" data-src="https://via.placeholder.com/200x200?text=row_04_col_08" /> <figcaption>Lorem ipsum 08</figcaption> </figure> <figure class="item"> <img alt="Row 04, col 09" class="lazy" data-src="https://via.placeholder.com/200x200?text=row_04_col_09" /> <figcaption>Lorem ipsum 09</figcaption> </figure> <figure class="item"> <img alt="Row 04, col 10" class="lazy" data-src="https://via.placeholder.com/200x200?text=row_04_col_10" /> <figcaption>Lorem ipsum 10</figcaption> </figure> <figure class="item"> <img alt="Row 04, col 11" class="lazy" data-src="https://via.placeholder.com/200x200?text=row_04_col_11" /> <figcaption>Lorem ipsum 11</figcaption> </figure> <figure class="item"> <img alt="Row 04, col 12" class="lazy" data-src="https://via.placeholder.com/200x200?text=row_04_col_12" /> <figcaption>Lorem ipsum 12</figcaption> </figure> <figure class="item"> <img alt="Row 04, col 13" class="lazy" data-src="https://via.placeholder.com/200x200?text=row_04_col_13" /> <figcaption>Lorem ipsum 13</figcaption> </figure> <figure class="item"> <img alt="Row 04, col 14" class="lazy" data-src="https://via.placeholder.com/200x200?text=row_04_col_14" /> <figcaption>Lorem ipsum 14</figcaption> </figure> <figure class="item"> <img alt="Row 04, col 15" class="lazy" data-src="https://via.placeholder.com/200x200?text=row_04_col_15" /> <figcaption>Lorem ipsum 15</figcaption> </figure> </div> <div class="horizContainer"> <figure class="item"> <img alt="Row 05, col 01" class="lazy" data-src="https://via.placeholder.com/200x200?text=row_05_col_01" /> <figcaption>Lorem ipsum 01</figcaption> </figure> <figure class="item"> <img alt="Row 05, col 02" class="lazy" data-src="https://via.placeholder.com/200x200?text=row_05_col_02" /> <figcaption>Lorem ipsum 02</figcaption> </figure> <figure class="item"> <img alt="Row 05, col 03" class="lazy" data-src="https://via.placeholder.com/200x200?text=row_05_col_03" /> <figcaption>Lorem ipsum 03</figcaption> </figure> <figure class="item"> <img alt="Row 05, col 04" class="lazy" data-src="https://via.placeholder.com/200x200?text=row_05_col_04" /> <figcaption>Lorem ipsum 04</figcaption> </figure> <figure class="item"> <img alt="Row 05, col 05" class="lazy" data-src="https://via.placeholder.com/200x200?text=row_05_col_05" /> <figcaption>Lorem ipsum 05</figcaption> </figure> <figure class="item"> <img alt="Row 05, col 06" class="lazy" data-src="https://via.placeholder.com/200x200?text=row_05_col_06" /> <figcaption>Lorem ipsum 06</figcaption> </figure> <figure class="item"> <img alt="Row 05, col 07" class="lazy" data-src="https://via.placeholder.com/200x200?text=row_05_col_07" /> <figcaption>Lorem ipsum 07</figcaption> </figure> <figure class="item"> <img alt="Row 05, col 08" class="lazy" data-src="https://via.placeholder.com/200x200?text=row_05_col_08" /> <figcaption>Lorem ipsum 08</figcaption> </figure> <figure class="item"> <img alt="Row 05, col 09" class="lazy" data-src="https://via.placeholder.com/200x200?text=row_05_col_09" /> <figcaption>Lorem ipsum 09</figcaption> </figure> <figure class="item"> <img alt="Row 05, col 10" class="lazy" data-src="https://via.placeholder.com/200x200?text=row_05_col_10" /> <figcaption>Lorem ipsum 10</figcaption> </figure> <figure class="item"> <img alt="Row 05, col 11" class="lazy" data-src="https://via.placeholder.com/200x200?text=row_05_col_11" /> <figcaption>Lorem ipsum 11</figcaption> </figure> <figure class="item"> <img alt="Row 05, col 12" class="lazy" data-src="https://via.placeholder.com/200x200?text=row_05_col_12" /> <figcaption>Lorem ipsum 12</figcaption> </figure> <figure class="item"> <img alt="Row 05, col 13" class="lazy" data-src="https://via.placeholder.com/200x200?text=row_05_col_13" /> <figcaption>Lorem ipsum 13</figcaption> </figure> <figure class="item"> <img alt="Row 05, col 14" class="lazy" data-src="https://via.placeholder.com/200x200?text=row_05_col_14" /> <figcaption>Lorem ipsum 14</figcaption> </figure> <figure class="item"> <img alt="Row 05, col 15" class="lazy" data-src="https://via.placeholder.com/200x200?text=row_05_col_15" /> <figcaption>Lorem ipsum 15</figcaption> </figure> </div> <div class="horizContainer"> <figure class="item"> <img alt="Row 06, col 01" class="lazy" data-src="https://via.placeholder.com/200x200?text=row_06_col_01" /> <figcaption>Lorem ipsum 01</figcaption> </figure> <figure class="item"> <img alt="Row 06, col 02" class="lazy" data-src="https://via.placeholder.com/200x200?text=row_06_col_02" /> <figcaption>Lorem ipsum 02</figcaption> </figure> <figure class="item"> <img alt="Row 06, col 03" class="lazy" data-src="https://via.placeholder.com/200x200?text=row_06_col_03" /> <figcaption>Lorem ipsum 03</figcaption> </figure> <figure class="item"> <img alt="Row 06, col 04" class="lazy" data-src="https://via.placeholder.com/200x200?text=row_06_col_04" /> <figcaption>Lorem ipsum 04</figcaption> </figure> <figure class="item"> <img alt="Row 06, col 05" class="lazy" data-src="https://via.placeholder.com/200x200?text=row_06_col_05" /> <figcaption>Lorem ipsum 05</figcaption> </figure> <figure class="item"> <img alt="Row 06, col 06" class="lazy" data-src="https://via.placeholder.com/200x200?text=row_06_col_06" /> <figcaption>Lorem ipsum 06</figcaption> </figure> <figure class="item"> <img alt="Row 06, col 07" class="lazy" data-src="https://via.placeholder.com/200x200?text=row_06_col_07" /> <figcaption>Lorem ipsum 07</figcaption> </figure> <figure class="item"> <img alt="Row 06, col 08" class="lazy" data-src="https://via.placeholder.com/200x200?text=row_06_col_08" /> <figcaption>Lorem ipsum 08</figcaption> </figure> <figure class="item"> <img alt="Row 06, col 09" class="lazy" data-src="https://via.placeholder.com/200x200?text=row_06_col_09" /> <figcaption>Lorem ipsum 09</figcaption> </figure> <figure class="item"> <img alt="Row 06, col 10" class="lazy" data-src="https://via.placeholder.com/200x200?text=row_06_col_10" /> <figcaption>Lorem ipsum 10</figcaption> </figure> <figure class="item"> <img alt="Row 06, col 11" class="lazy" data-src="https://via.placeholder.com/200x200?text=row_06_col_11" /> <figcaption>Lorem ipsum 11</figcaption> </figure> <figure class="item"> <img alt="Row 06, col 12" class="lazy" data-src="https://via.placeholder.com/200x200?text=row_06_col_12" /> <figcaption>Lorem ipsum 12</figcaption> </figure> <figure class="item"> <img alt="Row 06, col 13" class="lazy" data-src="https://via.placeholder.com/200x200?text=row_06_col_13" /> <figcaption>Lorem ipsum 13</figcaption> </figure> <figure class="item"> <img alt="Row 06, col 14" class="lazy" data-src="https://via.placeholder.com/200x200?text=row_06_col_14" /> <figcaption>Lorem ipsum 14</figcaption> </figure> <figure class="item"> <img alt="Row 06, col 15" class="lazy" data-src="https://via.placeholder.com/200x200?text=row_06_col_15" /> <figcaption>Lorem ipsum 15</figcaption> </figure> </div> <div class="horizContainer"> <figure class="item"> <img alt="Row 07, col 01" class="lazy" data-src="https://via.placeholder.com/200x200?text=row_07_col_01" /> <figcaption>Lorem ipsum 01</figcaption> </figure> <figure class="item"> <img alt="Row 07, col 02" class="lazy" data-src="https://via.placeholder.com/200x200?text=row_07_col_02" /> <figcaption>Lorem ipsum 02</figcaption> </figure> <figure class="item"> <img alt="Row 07, col 03" class="lazy" data-src="https://via.placeholder.com/200x200?text=row_07_col_03" /> <figcaption>Lorem ipsum 03</figcaption> </figure> <figure class="item"> <img alt="Row 07, col 04" class="lazy" data-src="https://via.placeholder.com/200x200?text=row_07_col_04" /> <figcaption>Lorem ipsum 04</figcaption> </figure> <figure class="item"> <img alt="Row 07, col 05" class="lazy" data-src="https://via.placeholder.com/200x200?text=row_07_col_05" /> <figcaption>Lorem ipsum 05</figcaption> </figure> <figure class="item"> <img alt="Row 07, col 06" class="lazy" data-src="https://via.placeholder.com/200x200?text=row_07_col_06" /> <figcaption>Lorem ipsum 06</figcaption> </figure> <figure class="item"> <img alt="Row 07, col 07" class="lazy" data-src="https://via.placeholder.com/200x200?text=row_07_col_07" /> <figcaption>Lorem ipsum 07</figcaption> </figure> <figure class="item"> <img alt="Row 07, col 08" class="lazy" data-src="https://via.placeholder.com/200x200?text=row_07_col_08" /> <figcaption>Lorem ipsum 08</figcaption> </figure> <figure class="item"> <img alt="Row 07, col 09" class="lazy" data-src="https://via.placeholder.com/200x200?text=row_07_col_09" /> <figcaption>Lorem ipsum 09</figcaption> </figure> <figure class="item"> <img alt="Row 07, col 10" class="lazy" data-src="https://via.placeholder.com/200x200?text=row_07_col_10" /> <figcaption>Lorem ipsum 10</figcaption> </figure> <figure class="item"> <img alt="Row 07, col 11" class="lazy" data-src="https://via.placeholder.com/200x200?text=row_07_col_11" /> <figcaption>Lorem ipsum 11</figcaption> </figure> <figure class="item"> <img alt="Row 07, col 12" class="lazy" data-src="https://via.placeholder.com/200x200?text=row_07_col_12" /> <figcaption>Lorem ipsum 12</figcaption> </figure> <figure class="item"> <img alt="Row 07, col 13" class="lazy" data-src="https://via.placeholder.com/200x200?text=row_07_col_13" /> <figcaption>Lorem ipsum 13</figcaption> </figure> <figure class="item"> <img alt="Row 07, col 14" class="lazy" data-src="https://via.placeholder.com/200x200?text=row_07_col_14" /> <figcaption>Lorem ipsum 14</figcaption> </figure> <figure class="item"> <img alt="Row 07, col 15" class="lazy" data-src="https://via.placeholder.com/200x200?text=row_07_col_15" /> <figcaption>Lorem ipsum 15</figcaption> </figure> </div> <div class="horizContainer"> <figure class="item"> <img alt="Row 08, col 01" class="lazy" data-src="https://via.placeholder.com/200x200?text=row_08_col_01" /> <figcaption>Lorem ipsum 01</figcaption> </figure> <figure class="item"> <img alt="Row 08, col 02" class="lazy" data-src="https://via.placeholder.com/200x200?text=row_08_col_02" /> <figcaption>Lorem ipsum 02</figcaption> </figure> <figure class="item"> <img alt="Row 08, col 03" class="lazy" data-src="https://via.placeholder.com/200x200?text=row_08_col_03" /> <figcaption>Lorem ipsum 03</figcaption> </figure> <figure class="item"> <img alt="Row 08, col 04" class="lazy" data-src="https://via.placeholder.com/200x200?text=row_08_col_04" /> <figcaption>Lorem ipsum 04</figcaption> </figure> <figure class="item"> <img alt="Row 08, col 05" class="lazy" data-src="https://via.placeholder.com/200x200?text=row_08_col_05" /> <figcaption>Lorem ipsum 05</figcaption> </figure> <figure class="item"> <img alt="Row 08, col 06" class="lazy" data-src="https://via.placeholder.com/200x200?text=row_08_col_06" /> <figcaption>Lorem ipsum 06</figcaption> </figure> <figure class="item"> <img alt="Row 08, col 07" class="lazy" data-src="https://via.placeholder.com/200x200?text=row_08_col_07" /> <figcaption>Lorem ipsum 07</figcaption> </figure> <figure class="item"> <img alt="Row 08, col 08" class="lazy" data-src="https://via.placeholder.com/200x200?text=row_08_col_08" /> <figcaption>Lorem ipsum 08</figcaption> </figure> <figure class="item"> <img alt="Row 08, col 09" class="lazy" data-src="https://via.placeholder.com/200x200?text=row_08_col_09" /> <figcaption>Lorem ipsum 09</figcaption> </figure> <figure class="item"> <img alt="Row 08, col 10" class="lazy" data-src="https://via.placeholder.com/200x200?text=row_08_col_10" /> <figcaption>Lorem ipsum 10</figcaption> </figure> <figure class="item"> <img alt="Row 08, col 11" class="lazy" data-src="https://via.placeholder.com/200x200?text=row_08_col_11" /> <figcaption>Lorem ipsum 11</figcaption> </figure> <figure class="item"> <img alt="Row 08, col 12" class="lazy" data-src="https://via.placeholder.com/200x200?text=row_08_col_12" /> <figcaption>Lorem ipsum 12</figcaption> </figure> <figure class="item"> <img alt="Row 08, col 13" class="lazy" data-src="https://via.placeholder.com/200x200?text=row_08_col_13" /> <figcaption>Lorem ipsum 13</figcaption> </figure> <figure class="item"> <img alt="Row 08, col 14" class="lazy" data-src="https://via.placeholder.com/200x200?text=row_08_col_14" /> <figcaption>Lorem ipsum 14</figcaption> </figure> <figure class="item"> <img alt="Row 08, col 15" class="lazy" data-src="https://via.placeholder.com/200x200?text=row_08_col_15" /> <figcaption>Lorem ipsum 15</figcaption> </figure> </div> <div class="horizContainer"> <figure class="item"> <img alt="Row 09, col 01" class="lazy" data-src="https://via.placeholder.com/200x200?text=row_09_col_01" /> <figcaption>Lorem ipsum 01</figcaption> </figure> <figure class="item"> <img alt="Row 09, col 02" class="lazy" data-src="https://via.placeholder.com/200x200?text=row_09_col_02" /> <figcaption>Lorem ipsum 02</figcaption> </figure> <figure class="item"> <img alt="Row 09, col 03" class="lazy" data-src="https://via.placeholder.com/200x200?text=row_09_col_03" /> <figcaption>Lorem ipsum 03</figcaption> </figure> <figure class="item"> <img alt="Row 09, col 04" class="lazy" data-src="https://via.placeholder.com/200x200?text=row_09_col_04" /> <figcaption>Lorem ipsum 04</figcaption> </figure> <figure class="item"> <img alt="Row 09, col 05" class="lazy" data-src="https://via.placeholder.com/200x200?text=row_09_col_05" /> <figcaption>Lorem ipsum 05</figcaption> </figure> <figure class="item"> <img alt="Row 09, col 06" class="lazy" data-src="https://via.placeholder.com/200x200?text=row_09_col_06" /> <figcaption>Lorem ipsum 06</figcaption> </figure> <figure class="item"> <img alt="Row 09, col 07" class="lazy" data-src="https://via.placeholder.com/200x200?text=row_09_col_07" /> <figcaption>Lorem ipsum 07</figcaption> </figure> <figure class="item"> <img alt="Row 09, col 08" class="lazy" data-src="https://via.placeholder.com/200x200?text=row_09_col_08" /> <figcaption>Lorem ipsum 08</figcaption> </figure> <figure class="item"> <img alt="Row 09, col 09" class="lazy" data-src="https://via.placeholder.com/200x200?text=row_09_col_09" /> <figcaption>Lorem ipsum 09</figcaption> </figure> <figure class="item"> <img alt="Row 09, col 10" class="lazy" data-src="https://via.placeholder.com/200x200?text=row_09_col_10" /> <figcaption>Lorem ipsum 10</figcaption> </figure> <figure class="item"> <img alt="Row 09, col 11" class="lazy" data-src="https://via.placeholder.com/200x200?text=row_09_col_11" /> <figcaption>Lorem ipsum 11</figcaption> </figure> <figure class="item"> <img alt="Row 09, col 12" class="lazy" data-src="https://via.placeholder.com/200x200?text=row_09_col_12" /> <figcaption>Lorem ipsum 12</figcaption> </figure> <figure class="item"> <img alt="Row 09, col 13" class="lazy" data-src="https://via.placeholder.com/200x200?text=row_09_col_13" /> <figcaption>Lorem ipsum 13</figcaption> </figure> <figure class="item"> <img alt="Row 09, col 14" class="lazy" data-src="https://via.placeholder.com/200x200?text=row_09_col_14" /> <figcaption>Lorem ipsum 14</figcaption> </figure> <figure class="item"> <img alt="Row 09, col 15" class="lazy" data-src="https://via.placeholder.com/200x200?text=row_09_col_15" /> <figcaption>Lorem ipsum 15</figcaption> </figure> </div> <div class="horizContainer"> <figure class="item"> <img alt="Row 10, col 01" class="lazy" data-src="https://via.placeholder.com/200x200?text=row_10_col_01" /> <figcaption>Lorem ipsum 01</figcaption> </figure> <figure class="item"> <img alt="Row 10, col 02" class="lazy" data-src="https://via.placeholder.com/200x200?text=row_10_col_02" /> <figcaption>Lorem ipsum 02</figcaption> </figure> <figure class="item"> <img alt="Row 10, col 03" class="lazy" data-src="https://via.placeholder.com/200x200?text=row_10_col_03" /> <figcaption>Lorem ipsum 03</figcaption> </figure> <figure class="item"> <img alt="Row 10, col 04" class="lazy" data-src="https://via.placeholder.com/200x200?text=row_10_col_04" /> <figcaption>Lorem ipsum 04</figcaption> </figure> <figure class="item"> <img alt="Row 10, col 05" class="lazy" data-src="https://via.placeholder.com/200x200?text=row_10_col_05" /> <figcaption>Lorem ipsum 05</figcaption> </figure> <figure class="item"> <img alt="Row 10, col 06" class="lazy" data-src="https://via.placeholder.com/200x200?text=row_10_col_06" /> <figcaption>Lorem ipsum 06</figcaption> </figure> <figure class="item"> <img alt="Row 10, col 07" class="lazy" data-src="https://via.placeholder.com/200x200?text=row_10_col_07" /> <figcaption>Lorem ipsum 07</figcaption> </figure> <figure class="item"> <img alt="Row 10, col 08" class="lazy" data-src="https://via.placeholder.com/200x200?text=row_10_col_08" /> <figcaption>Lorem ipsum 08</figcaption> </figure> <figure class="item"> <img alt="Row 10, col 10" class="lazy" data-src="https://via.placeholder.com/200x200?text=row_10_col_10" /> <figcaption>Lorem ipsum 09</figcaption> </figure> <figure class="item"> <img alt="Row 10, col 10" class="lazy" data-src="https://via.placeholder.com/200x200?text=row_10_col_10" /> <figcaption>Lorem ipsum 10</figcaption> </figure> <figure class="item"> <img alt="Row 10, col 11" class="lazy" data-src="https://via.placeholder.com/200x200?text=row_10_col_11" /> <figcaption>Lorem ipsum 11</figcaption> </figure> <figure class="item"> <img alt="Row 10, col 12" class="lazy" data-src="https://via.placeholder.com/200x200?text=row_10_col_12" /> <figcaption>Lorem ipsum 12</figcaption> </figure> <figure class="item"> <img alt="Row 10, col 13" class="lazy" data-src="https://via.placeholder.com/200x200?text=row_10_col_13" /> <figcaption>Lorem ipsum 13</figcaption> </figure> <figure class="item"> <img alt="Row 10, col 14" class="lazy" data-src="https://via.placeholder.com/200x200?text=row_10_col_14" /> <figcaption>Lorem ipsum 14</figcaption> </figure> <figure class="item"> <img alt="Row 10, col 15" class="lazy" data-src="https://via.placeholder.com/200x200?text=row_10_col_15" /> <figcaption>Lorem ipsum 15</figcaption> </figure> </div> <script src="../dist/lazyload.min.js"></script> <script> (function () { var lazyLoadInstances = []; function logElementEvent(eventName, element) { console.log(Date.now(), eventName, element.getAttribute("data-src")); } var callback_enter = function (element) { // Instantiate a new LazyLoad on the element that entered var oneLL = new LazyLoad({ container: element }); // Optionally push it in the lazyLoadInstances // array to keep track of the instances lazyLoadInstances.push(oneLL); logElementEvent("🔑 ENTERED", element); }; var callback_exit = function (element) { logElementEvent("🚪 EXITED", element); }; var callback_loading = function (element) { logElementEvent("⌚ LOADING", element); }; var callback_loaded = function (element) { logElementEvent("👍 LOADED", element); }; var callback_error = function (element) { logElementEvent("💀 ERROR", element); element.src = "https://via.placeholder.com/440x560/?text=Error+Placeholder"; }; var callback_finish = function () { logElementEvent("✔️ FINISHED", document.documentElement); }; var callback_cancel = function (element) { logElementEvent("🔥 CANCEL", element); }; // The "lazyLazy" instance of lazyload is used // to check when the .horizContainer divs enter the viewport var lazyLazy = new LazyLoad({ elements_selector: ".horizContainer", unobserve_entered: true, // <- To avoid executing the script multiple times // Assign the callbacks defined above callback_enter: callback_enter, callback_exit: callback_exit, callback_cancel: callback_cancel, callback_loading: callback_loading, callback_loaded: callback_loaded, callback_error: callback_error, callback_finish: callback_finish }); })(); </script> </body> </html>