Estoy tratando de implementar la carga diferida en mi proyecto personal. He podido hacer que funcione en mi página de inicio o en la página de mi galería, pero nunca en ambas.
Creo que el problema es que "lowResImage" no actualiza su ruta al siguiente elemento de la matriz.
Pido disculpas si este código está mal escrito, apenas estoy comenzando a aprender y he movido mucho las cosas tratando de encontrar una solución.
// SET RES-IMAGE-REPLACEMENT, AND RUN LAZYLOADERSETUP ON EACH IMAGE resImageReplacements = document.getElementsByClassName('res-image-replacement'); for (let i = 0; i < resImageReplacements.length; i++) { lazyLoaderSetup(resImageReplacements[i], i); } function lazyLoaderSetup(i) { highResImage = document.createElement("IMG"); lowResImage = document.getElementsByClassName('picturesToBeSwapped')[i]; resReplacement = document.getElementsByClassName("res-image-replacement")[i]; // SET HIGH RES IMAGE UP WITH CLASS, ID, AND HIGH RES SOURCE highResImage.setAttribute("class", "mainBackground"); highResImage.setAttribute("id", "mainBackground"); highResImage.setAttribute('src', lowResImage.getAttribute("high-res-src")); // IF THE LOW RES IMAGE CLASS EXISTS, ADD THE LOAD LISTENER WHICH WILL RUN REMOVEAPPEND FUNCTION if (resReplacement.contains(lowResImage)) { highResImage.addEventListener('load', removeAppend); } } // REMOVE THE LOW RES ELEMENT, ADD THE HIGH RES ELEMENT, REMOVE LISTENER function removeAppend() { resReplacement.removeChild(lowResImage); resReplacement.appendChild(highResImage); highResImage.removeEventListener('load', removeAppend); }Finalmente conseguí que el Lazy Loader funcionara correctamente. Establecer lowResImage para que siempre sea el primer elemento en la matriz picturesToBeSwapped solucionó mi problema. Aquí está mi código actualizado, espero que pueda ser útil para alguien en el futuro.
// SET RES-IMAGE-REPLACEMENT, AND RUN LAZYLOADERSETUP ON EACH IMAGE resImageReplacements = document.getElementsByClassName('res-image-replacement'); for (let i = 0; i < resImageReplacements.length; i++) { lazyLoaderSetup(i); } function lazyLoaderSetup( i) { highResImage = document.createElement("IMG"); lowResImage = document.getElementsByClassName('picturesToBeSwapped')[0]; resReplacement = document.getElementsByClassName("res-image-replacement")[i]; // SET HIGH RES IMAGE UP WITH CLASS, ID, AND HIGH RES SOURCE highResImage.setAttribute("class", "mainBackground"); highResImage.setAttribute('src', lowResImage.getAttribute("high-res-src")); // IF THE LOW RES IMAGE CLASS EXISTS, ADD THE LOAD LISTENER WHICH WILL RUN REMOVEAPPEND FUNCTION if (resReplacement.contains(lowResImage)) { highResImage.addEventListener('load', removeAppend); } } // REMOVE THE LOW RES ELEMENT, ADD THE HIGH RES ELEMENT, REMOVE LISTENER function removeAppend() { resReplacement.removeChild(lowResImage); resReplacement.appendChild(highResImage); highResImage.removeEventListener('load', removeAppend()); }