web-assets/lazyload/v17/demos/print.html
2023-12-30 22:34:25 +01:00

634 lines
18 KiB
HTML
Raw Blame History

This file contains invisible Unicode characters

This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8" />
<title>
Print - Lazyload demos
</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
body {
margin: 0;
}
ul,
li {
list-style-type: none;
margin: 0;
padding: 0;
}
a,
img {
display: block;
}
img {
border: 0;
width: 220px;
height: 280px;
}
img:not([src]) {
visibility: hidden;
}
.topBar {
position: fixed;
padding: 10px;
background-image: linear-gradient(to top, #fff3, #ffff);
top: 0;
right: 0;
left: 0;
}
.topBar button {
background-color: rgb(0, 157, 255);
background-image: linear-gradient(to bottom, #0000, #0003);
color: white;
padding: 10px;
font-size: 16px;
width: 100%;
max-width: 400px;
display: block;
min-height: 48px;
box-sizing: border-box;
}
.topBar button:disabled {
opacity: 0.5;
}
@media print {
.topBar {
display: none;
}
}
/* Fixes Firefox anomaly during image load */
@-moz-document url-prefix() {
img:-moz-loading {
visibility: hidden;
}
}
</style>
</head>
<body>
<h1>Print demo</h1>
<div class="topBar">
<button class="print">🖨️ Print</button>
</div>
<div id="results1" class="results">
<ul>
<li>
<a href="#/it/donna/stivaletti_cod44721746jj.html">
<img
alt="Stivaletti"
src="https://via.placeholder.com/440x560?text=Img+01"
width="220"
height="280"
/>
</a>
</li>
<li>
<a href="#/it/donna/open-toe_cod44740806jx.html">
<img
alt="Open toe"
src="https://via.placeholder.com/440x560?text=Img+02"
width="220"
height="280"
/>
</a>
</li>
<li>
<a href="#/it/donna/sneakers-tennis-shoes-basse_cod44735977gr.html">
<img
alt="Sneakers &amp; Tennis"
src="https://via.placeholder.com/440x560?text=Img+03"
width="220"
height="280"
/>
</a>
</li>
<li>
<a href="#/it/donna/sneakers-tennis-shoes-basse_cod44738717am.html">
<img
alt="Sneakers &amp; Tennis shoes basse"
class="lazy"
data-src="https://via.placeholder.com/440x560?text=Img+04"
width="220"
height="280"
/>
</a>
</li>
<li>
<a href="#/it/donna/sneakers-tennis-shoes-alte_cod44739940cb.html">
<img
alt="Sneakers &amp; Tennis shoes alte"
class="lazy"
data-src="https://via.placeholder.com/440x560?text=Img+05"
width="220"
height="280"
/>
</a>
</li>
<li>
<a href="#/it/donna/sneakers-tennis-shoes-alte_cod44740860xg.html">
<img
alt="Sneakers &amp; Tennis shoes alte"
class="lazy"
data-src="https://via.placeholder.com/440x560?text=Img+06"
width="220"
height="280"
/>
</a>
</li>
<li>
<a href="#/it/donna/sneakers-tennis-shoes-basse_cod44738719vn.html">
<img
alt="Sneakers &amp; Tennis shoes basse"
class="lazy"
data-src="https://via.placeholder.com/440x560?text=Img+07"
width="220"
height="280"
/>
</a>
</li>
<li>
<a href="#/it/donna/sneakers-tennis-shoes-basse_cod44739938wk.html">
<img
alt="Sneakers &amp; Tennis shoes basse"
class="lazy"
data-src="https://via.placeholder.com/440x560?text=Img+08"
width="220"
height="280"
/>
</a>
</li>
<li>
<a href="#/it/donna/stivali_cod44736534fq.html">
<img
alt="Stivali"
class="lazy"
data-src="https://via.placeholder.com/440x560?text=Img+09"
width="220"
height="280"
/>
</a>
</li>
<li>
<a href="#/it/donna/stivali_cod44735388ui.html">
<img
alt="Stivali"
class="lazy"
data-src="https://via.placeholder.com/440x560?text=Img+10"
width="220"
height="280"
/>
</a>
</li>
<li>
<a href="#/it/donna/stivaletti_cod44739165ev.html">
<img
alt="Stivaletti"
class="lazy"
data-src="https://via.placeholder.com/440x560?text=Img+11"
width="220"
height="280"
/>
</a>
</li>
<li>
<a href="#/it/donna/stivaletti_cod44739454hf.html">
<img
alt="Stivaletti"
class="lazy"
data-src="https://via.placeholder.com/440x560?text=Img+12"
width="220"
height="280"
/>
</a>
</li>
<li>
<a href="#/it/donna/stivali_cod44719480km.html">
<img
alt="Stivali"
class="lazy"
data-src="https://via.placeholder.com/440x560?text=Img+13"
width="220"
height="280"
/>
</a>
</li>
<li>
<a href="#/it/donna/stivaletti_cod44719687td.html">
<img
alt="Stivaletti"
class="lazy"
data-src="https://via.placeholder.com/440x560?text=Img+14"
width="220"
height="280"
/>
</a>
</li>
<li>
<a href="#/it/donna/decollete_cod44721899ng.html">
<img
alt="Décolleté"
class="lazy"
data-src="https://via.placeholder.com/440x560?text=Img+15"
width="220"
height="280"
/>
</a>
</li>
<li>
<a href="#/it/donna/mocassini_cod44721744sl.html">
<img
alt="Mocassini"
class="lazy"
data-src="https://via.placeholder.com/440x560?text=Img+16"
width="220"
height="280"
/>
</a>
</li>
<li>
<a href="#/it/donna/stivaletti_cod44716730kr.html">
<img
alt="Stivaletti"
class="lazy"
data-src="https://via.placeholder.com/440x560?text=Img+17"
width="220"
height="280"
/>
</a>
</li>
<li>
<a href="#/it/donna/decollete_cod44718734xl.html">
<img
alt="Décolleté"
class="lazy"
data-src="https://via.placeholder.com/440x560?text=Img+18"
width="220"
height="280"
/>
</a>
</li>
<li>
<a href="#/it/donna/decollete_cod44721796uk.html">
<img
alt="Décolleté"
class="lazy"
data-src="https://via.placeholder.com/440x560?text=Img+19"
width="220"
height="280"
/>
</a>
</li>
<li>
<a href="#/it/donna/francesine_cod44717679mj.html">
<img
alt="Francesine"
class="lazy"
data-src="https://via.placeholder.com/440x560?text=Img+20"
width="220"
height="280"
/>
</a>
</li>
<li>
<a href="#/it/donna/stivaletti_cod44724594vu.html">
<img
alt="Stivaletti"
class="lazy"
data-src="https://via.placeholder.com/440x560?text=Img+21"
width="220"
height="280"
/>
</a>
</li>
<li>
<a href="#/it/donna/decollete_cod44726148aq.html">
<img
alt="Décolleté"
class="lazy"
data-src="https://via.placeholder.com/440x560?text=Img+22"
width="220"
height="280"
/>
</a>
</li>
<li>
<a href="#/it/donna/mocassini_cod44719629nt.html">
<img
alt="Mocassini"
class="lazy"
data-src="https://via.placeholder.com/440x560?text=Img+23"
width="220"
height="280"
/>
</a>
</li>
<li>
<a href="#/it/donna/mocassini_cod44725329kq.html">
<img
alt="Mocassini"
class="lazy"
data-src="https://via.placeholder.com/440x560?text=Img+24"
width="220"
height="280"
/>
</a>
</li>
<li>
<a href="#/it/donna/stivali_cod44724026qs.html">
<img
alt="Stivali"
class="lazy"
data-src="https://via.placeholder.com/440x560?text=Img+25"
width="220"
height="280"
/>
</a>
</li>
<li>
<a href="#/it/donna/stivaletti_cod44720256gw.html">
<img
alt="Stivaletti"
class="lazy"
data-src="https://via.placeholder.com/440x560?text=Img+26"
width="220"
height="280"
/>
</a>
</li>
<li>
<a href="#/it/donna/stivaletti_cod44722062id.html">
<img
alt="Stivaletti"
class="lazy"
data-src="https://via.placeholder.com/440x560?text=Img+27"
width="220"
height="280"
/>
</a>
</li>
<li>
<a href="#/it/donna/mocassini_cod44722402rh.html">
<img
alt="Mocassini"
class="lazy"
data-src="https://via.placeholder.com/440x560?text=Img+28"
width="220"
height="280"
/>
</a>
</li>
<li>
<a href="#/it/donna/stivaletti_cod44726296vu.html">
<img
alt="Stivaletti"
class="lazy"
data-src="https://via.placeholder.com/440x560?text=Img+29"
width="220"
height="280"
/>
</a>
</li>
<li>
<a href="#/it/donna/stivaletti_cod44725755ct.html">
<img
alt="Stivaletti"
class="lazy"
data-src="https://via.placeholder.com/440x560?text=Img+30"
width="220"
height="280"
/>
</a>
</li>
<li>
<a href="#/it/donna/stivaletti_cod44725348nv.html">
<img
alt="Stivaletti"
class="lazy"
data-src="https://via.placeholder.com/440x560?text=Img+31"
width="220"
height="280"
/>
</a>
</li>
<li>
<a href="#/it/donna/stivaletti_cod44721879xx.html">
<img
alt="Stivaletti"
class="lazy"
data-src="https://via.placeholder.com/440x560?text=Img+32"
width="220"
height="280"
/>
</a>
</li>
<li>
<a href="#/it/donna/cuissardes_cod44729472iq.html">
<img
alt="Cuissardes"
class="lazy"
data-src="https://via.placeholder.com/440x560?text=Img+33"
width="220"
height="280"
/>
</a>
</li>
<li>
<a href="#/it/donna/decollete_cod44725388jv.html">
<img
alt="Décolleté"
class="lazy"
data-src="https://via.placeholder.com/440x560?text=Img+34"
width="220"
height="280"
/>
</a>
</li>
<li>
<a href="#/it/donna/stivaletti_cod44721854ce.html">
<img
alt="Stivaletti"
class="lazy"
data-src="https://via.placeholder.com/440x560?text=Img+35"
width="220"
height="280"
/>
</a>
</li>
<li>
<a href="#/it/donna/sneakers-tennis-shoes-basse_cod44727690jp.html">
<img
alt="Sneakers &amp; Tennis shoes basse"
class="lazy"
data-src="https://via.placeholder.com/440x560?text=Img+36"
width="220"
height="280"
/>
</a>
</li>
<li>
<a href="#/it/donna/mocassini_cod44727501hh.html">
<img
alt="Mocassini"
class="lazy"
data-src="https://via.placeholder.com/440x560?text=Img+37"
width="220"
height="280"
/>
</a>
</li>
<li>
<a href="#/it/donna/sneakers-tennis-shoes-basse_cod44727038aq.html">
<img
alt="Sneakers &amp; Tennis shoes basse"
class="lazy"
data-src="https://via.placeholder.com/440x560?text=Img+38"
width="220"
height="280"
/>
</a>
</li>
<li>
<a href="#/it/donna/mocassini_cod44704882bq.html">
<img
alt="Mocassini"
class="lazy"
data-src="https://via.placeholder.com/440x560?text=Img+39"
width="220"
height="280"
/>
</a>
</li>
<li>
<a href="#/it/donna/mocassini_cod44734002vc.html">
<img
alt="Mocassini"
class="lazy"
data-src="https://via.placeholder.com/440x560?text=Img+40"
width="220"
height="280"
/>
</a>
</li>
</ul>
</div>
<script src="../dist/lazyload.min.js"></script>
<script>
/*
CALLBACKS DEFINITION
--------------------
One definition to rule all demos */
function logElementEvent(eventName, element) {
console.log(Date.now(), eventName, element.getAttribute("data-src"));
}
var callback_enter = function (element) {
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_cancel = function (element) {
logElementEvent("🔥 CANCEL", element);
};
var callback_finish = function () {
logElementEvent("✔️ FINISHED", document.documentElement);
// Open print dialog here!
allLoaded = true;
if (printRequested) {
openPrintDialog();
}
};
/*
CUSTOM PRINT BUTTON MANAGEMENT
------------------------------
The best way to print it is to provide a custom button which
first download all the remaining images, then open the print dialog */
var printRequested = false;
var allLoaded = false;
function printButtonHandler(event) {
printButton.innerHTML = "Preparing...";
printButton.disabled = true;
if (allLoaded) {
openPrintDialog();
} else {
printRequested = true;
wLazyLoad.loadAll();
}
}
function openPrintDialog() {
printButton.innerHTML = printButtonContent;
printButton.disabled = false;
window.print();
}
var printButton = document.querySelector(".print");
printButtonContent = printButton.innerHTML;
printButton.addEventListener("click", printButtonHandler);
/*
LAZYLOAD DEFINITION
-------------------
Global instance of LazyLoad in wLazyLoad,
used to call the loadAll method in different points */
var wLazyLoad = new LazyLoad({
// 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
});
/*
BROWSER'S NATIVE PRINT EVENTS LISTENERS
---------------------------------------
In order to make browsers load all the images before printing
even if the user doesn't press the custom print button.
NOTE that this works only partially in some browsers! */
var isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
if (!isSafari) {
window.onbeforeprint = function () {
wLazyLoad.loadAll();
};
} else {
// Safari doesn't support the onbeforeprint event
var mediaQueryList = window.matchMedia("print");
mediaQueryList.addListener(function (mql) {
if (mql.matches) {
wLazyLoad.loadAll();
}
});
}
</script>
</body>
</html>