Hai due soluzioni ( forse anche di più, ma io conosco solo queste
uhaha ) che possono essere implementate anche entrambe per ottimizzare ancora di più.
La prima è quella di utilizzare un lazy loading, ovvero un sistema per cui le immagini vengono caricate solo quando entrano all'interno della porzione di schermo visualizzata dall'utente. In questo modo, si caricheranno pian piano non bloccando la pagina.
Altra cosa è quella di caricare proprio parti di dati arrivati alla fine della pagina tramite ajax;
Ti passo un codicino che ho modificato tempo fa unendo vari esempi trovati online per caricare le immagini e i video in lazy loading di immagini e video.
JavaScript:
document.addEventListener("DOMContentLoaded", function () {
// Definisco i target
const targetsImg = document.querySelectorAll(".lazy-image");
const targetsVid = document.querySelectorAll("iframe.lazy-video");
// Se il Browser non è compatibile..
if (!('IntersectionObserver' in window)) {
//Carico le immagini normalmente
function caricaImg(image) {
image.src = image.dataset.src;
}
targetsImg.forEach(caricaImg);
//Carico i video normalmente
function caricaVid(video) {
video.src = video.dataset.src;
}
targetsVid.forEach(caricaVid);
// Se il Browser è compatibile inizio..
} else {
const options = {
threshold: [0, 0.5, 1]
}
/* ****** IMMAGINI LAZY LOAD***** */
//Instanzio observer per immagini
const observerImm = new IntersectionObserver(callbackImg, options);
targetsImg.forEach(target => observerImm.observe(target));
// Funzioni per le immagini
function fetchImage(url) {
return new Promise((resolve, reject) => {
const image = new Image();
image.src = url;
image.onload = resolve;
image.onerror = reject;
});
}
// Funzioni di callback
function callbackImg(entries) {
entries.forEach(entry => {
// calcolo la percentuale di sovrapposizione
const ratio = entry.intersectionRatio;
const element = entry.target;
// se l'elemento è visibile
if (ratio > 0) {
// rimuovo l'elemento dall'observer
observerImm.unobserve(element);
// recupero l'immagine e la carico a video
const src = element.dataset.src
fetchImage(src).then(() => {
element.src = element.dataset.src;
});
}
});
}
/* ****** VIDEO LAZY LOAD***** */
//Instanzio observer per i video
const observerVid = new IntersectionObserver(callbackVid, options);
targetsVid.forEach(target => observerVid.observe(target));
// Funzioni di callback
function callbackVid(entries) {
entries.forEach(entry => {
// calcolo la percentuale di sovrapposizione
const ratio = entry.intersectionRatio;
const element = entry.target;
// se l'elemento è visibile
if (ratio > 0) {
// rimuovo l'elemento dall'observer
observerVid.unobserve(element);
// recupero l'elemento e lo carico a video
const src = element.dataset.src
element.src = element.dataset.src;
}
});
}
}/*Fine else*/
}); /*Fine event lister*/
Affinchè funzioni dovrai inserire le immagini e i video condivisi da you tube, ad esempio, così:
HTML:
<img class="lazy-image" data-src="https://www.xxxxx.net/images/tuolink/xxxxxxx.png"><br>
<iframe class="lazy-video" width="100%" data-src="https://www.youtube.com/embed/xxxxxxxxxxx" frameborder="0" allowfullscreen></iframe>
Se hai problemi ti invio in privato una paginetta html funzionante. Così puoi vederlo in azione.