Den här handledningen visar hur man skjuter upp bildinläsning tills det att hela dokumentet (DOM) har laddats in och tills dess att bilder korsar visningsområdet. Vi kommer att hämta bilder med lat-inläsning genom att använda ren JavaScript och tillhandahålla olika bildstorlekar för olika skärmstorlekar.
Du kanske vill skjuta upp bildinläsning för att förbättra hastigheten och spara bandbredd på mobila enheter. Lat-inläsning av bilder innebär att bilder bara laddas om de är i visningsområdet och att de laddas efter det att hela dokumentet (DOM) har lästs in.
Det här tillägget har testats och fungerar med Google Chrome (75.0.3770.100), Mozilla Firefox (67.0.4) och Microsoft Edge (42.17134.1.0), detta utan någon polyfill. Tillägget fungerar i Internet Explorer (11.829.17134.0) med en polyfill för IntersectionObserver. Om du vill stödja äldre webbläsare kan du läsa vårt inlägg om transpilering och komplettering av JavaScript.
JavaScript
Vi har lagt till en händelselyssnare för att skjuta upp bildinläsningen tills det att hela dokumentet (DOM) har laddats och vi använder en observatör för att bara ladda bilder när de korsar visningsområdet.
// Initialize when DOM content has been loaded
document.addEventListener('DOMContentLoaded', start, false);
// Start this instance
function start()
{
// Lazy load images
lazyLoadImages();
} // End of the start method
// Lazy load images
function lazyLoadImages()
{
// Get images
var images = document.querySelectorAll('img.lazy');
// Create a new IntersectionObserver (Polyfilled)
var observer = new IntersectionObserver(function (entries) {
// Loop entries
for (i = 0; i < entries.length; i++) {
if (entries[i].isIntersecting === true) {
var image = entries[i].target;
var src = image.getAttribute('data-src');
var srcset = image.getAttribute('data-srcset');
if (src !== null) { image.src = src; }
if (srcset !== null) { image.srcset = srcset; }
image.classList.remove('lazy');
observer.unobserve(image);
}
}
});
// Loop images
for (i = 0; i < images.length; i++) {
observer.observe(images[i]);
}
} // End of the lazyLoadImages methodExempel med html
Vi kan använda en bildkälla i en img-tagg eller en uppsättning av flera bildstorlekar, webbläsaren väljer den bild som ska användas i en källuppsättning. Vi lägger till lazy som klass till bilder som skall ha uppskjuten inläsning. Äldre webbläsare stöder inte attributet srcset och vi måste därför lägga till attributet data-src som backup. Du behöver också en polyfill för IntersectionObserver om du vill stödja äldre webbläsare.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Lazy image loading</title>
<style>
.annytab-image{
max-width: 100%;
}
.lazy{
visibility: hidden;
}
</style>
</head>
<body style="width:100%;font-family:Arial, Helvetica, sans-serif;padding:0;margin:0;">
<!-- One size image fits all screens -->
<img alt="One image size fits all screens!" class="lazy annytab-image" data-src="/images/fall_nature.jpg" />
<!-- Multiple image sizes for different screens, data-src is fallback for IE 11 and older browsers -->
<img alt="Multiple image sizes for different screens!"
class="lazy annytab-image"
data-src="/images/adventure-clouds-640x360.jpg"
data-srcset="/images/adventure-clouds-640x360.jpg 640w,
/images/adventure-clouds-1280x720.jpg 1280w,
/images/adventure-clouds-1920x1080.jpg 1920w,
/images/adventure-clouds-3840x2160.jpg 3840w" />
<!-- Scripts -->
<!--<script src="/js/polyfills/intersection.observer.min.js"></script>-->
<script>
// Initialize when DOM content has been loaded
document.addEventListener('DOMContentLoaded', start, false);
// Start this instance
function start()
{
// Lazy load images
lazyLoadImages();
} // End of the start method
// Lazy load images
function lazyLoadImages()
{
// Get images
var images = document.querySelectorAll('img.lazy');
// Create a new IntersectionObserver (Polyfilled)
var observer = new IntersectionObserver(function (entries) {
// Loop entries
for (i = 0; i < entries.length; i++) {
if (entries[i].isIntersecting === true) {
var image = entries[i].target;
var src = image.getAttribute('data-src');
var srcset = image.getAttribute('data-srcset');
if (src !== null) { image.src = src; }
if (srcset !== null) { image.srcset = srcset; }
image.classList.remove('lazy');
observer.unobserve(image);
}
}
});
// Loop images
for (i = 0; i < images.length; i++) {
observer.observe(images[i]);
}
} // End of the lazyLoadImages method
</script>
</body>
</html>