perf: load images lazily on the collection page

Fix #1508

Author: php-coder

src/main/scripts/execute-command.sh

@@ -77,6 +77,7 @@ case ${1:-} in
 				'An "img" element must have an "alt" attribute' \
 				'Element "option" without attribute "label" must not be empty' \
 				'The "width" attribute on the "td" element is obsolete' \
+				'Attribute "loading" not allowed on element "img" at this point' \
 			--show-warnings
 		;;
 	'integration-tests')

src/main/webapp/WEB-INF/views/collection/info.html

@@ -140,6 +140,7 @@ <h4 class="panel-title" th:text="#{t_stamps_by_categories}">Stamps by categories
 										<img src="http://via.placeholder.com/250"
 											 alt="Prehistoric animals, Italy, 1999, 7&nbsp;stamps (imperf.)"
 											 title="Prehistoric animals, Italy, 1999, 7&nbsp;stamps (imperf.)"
+											 loading="lazy"
 											 th:alt="${desc}"
 											 th:title="${desc}"
 											 th:src="@{${GET_IMAGE_PREVIEW_PAGE}(id=${series.previewId})}" />
@@ -163,19 +164,28 @@ <h4 class="panel-title" th:text="#{t_stamps_by_categories}">Stamps by categories
 								</figure>
 								<figure>
 									<a href="../series/info.html">
-										<img src="http://via.placeholder.com/250" alt="Prehistoric animals, Italy, 22&nbsp;stamps" title="Prehistoric animals, Italy, 22&nbsp;stamps" />
+										<img src="http://via.placeholder.com/250"
+											alt="Prehistoric animals, Italy, 22&nbsp;stamps"
+											title="Prehistoric animals, Italy, 22&nbsp;stamps"
+											loading="lazy" />
 									</a>
 									<figcaption><a href="../series/info.html">Prehistoric animals, Italy, 22&nbsp;stamps</a></figcaption>
 								</figure>
 								<figure>
 									<a href="../series/info.html">
-										<img src="http://via.placeholder.com/250" alt="Cartoons, Italy, 2005, 5&nbsp;stamps" title="Cartoons, Italy, 2005, 5&nbsp;stamps" />
+										<img src="http://via.placeholder.com/250"
+											alt="Cartoons, Italy, 2005, 5&nbsp;stamps"
+											title="Cartoons, Italy, 2005, 5&nbsp;stamps"
+											loading="lazy" />
 									</a>
 									<figcaption><a href="../series/info.html">Cartoons, Italy, 2005, 5&nbsp;stamps</a></figcaption>
 								</figure>
 								<figure>
 									<a href="../series/info.html">
-										<img src="http://via.placeholder.com/250" alt="Prehistoric animals, Italy, 22&nbsp;stamps" title="Prehistoric animals, Italy, 22&nbsp;stamps" />
+										<img src="http://via.placeholder.com/250"
+											alt="Prehistoric animals, Italy, 22&nbsp;stamps"
+											title="Prehistoric animals, Italy, 22&nbsp;stamps"
+											loading="lazy" />
 										<span class="label image-counter">2 images</span>
 									</a>
 									<figcaption>
@@ -185,19 +195,28 @@ <h4 class="panel-title" th:text="#{t_stamps_by_categories}">Stamps by categories
 								</figure>
 								<figure>
 									<a href="../series/info.html">
-										<img src="http://via.placeholder.com/250" alt="Prehistoric animals, Italy, 1983, 5&nbsp;stamps" title="Prehistoric animals, Italy, 1983, 5&nbsp;stamps" />
+										<img src="http://via.placeholder.com/250"
+											alt="Prehistoric animals, Italy, 1983, 5&nbsp;stamps"
+											title="Prehistoric animals, Italy, 1983, 5&nbsp;stamps"
+											loading="lazy" />
 									</a>
 									<figcaption><a href="../series/info.html">Prehistoric animals, Italy, 1983, 5&nbsp;stamps</a></figcaption>
 								</figure>
 								<figure>
 									<a href="../series/info.html">
-										<img src="http://via.placeholder.com/250" alt="Famous People, Italy, 2003, 4&nbsp;stamps" title="Famous People, Italy, 2003, 4&nbsp;stamps" />
+										<img src="http://via.placeholder.com/250"
+											alt="Famous People, Italy, 2003, 4&nbsp;stamps"
+											title="Famous People, Italy, 2003, 4&nbsp;stamps"
+											loading="lazy" />
 									</a>
 									<figcaption><a href="../series/info.html">Famous People, Italy, 2003, 4&nbsp;stamps</a></figcaption>
 								</figure>
 								<figure>
 									<a href="../series/info.html">
-										<img src="http://via.placeholder.com/250" alt="Sport, Italy, 1996, 1&nbsp;stamp" title="Sport, Italy, 1996, 1&nbsp;stamp" />
+										<img src="http://via.placeholder.com/250"
+											alt="Sport, Italy, 1996, 1&nbsp;stamp"
+											title="Sport, Italy, 1996, 1&nbsp;stamp"
+											loading="lazy" />
 									</a>
 									<figcaption><a href="../series/info.html">Sport, Italy, 1996, 1&nbsp;stamp</a></figcaption>
 								</figure>