No aplique lazy loading usando IntersectionObserver sino que lo hice añadiendo al elemento <img> el atributo loading = “lazy” de es...

¿Podrías mostrarme por fa tu código para ayudarte a revisar? A simple vista parece que todo lo estás haciendo bien jeje. :sweat_smile:

codigo de la funcion createMovies:

function createMovies(movies, container, clean){
     if (clean) {
        container.innerHTML = "";
      }
    
     movies.forEach(readMovies => {
        const movieContainer = document.createElement("div")
        movieContainer.classList.add("movie-container")

        const movieImg = document.createElement("img")

        //se le añade al elemento movieImg la clase "movie-img" para asi aplicarle el estilo que dicha clase tiene en el codigo css
        movieImg.classList.add("movie-img")
        movieImg.setAttribute("alt", readMovies.title)
        
        movieImg.setAttribute("src", "https://image.tmdb.org/t/p/w300/" + readMovies.poster_path) 
        
        movieImg.setAttribute("loading", "lazy")

        movieImg.addEventListener("error", () =>{
            movieImg.setAttribute("src", "https://cdn4.iconfinder.com/data/icons/ui-beast-4/32/Ui-12-512.png")
        } )
     
        movieContainer.appendChild(movieImg)
        container.appendChild(movieContainer)
        movieContainer.addEventListener("click", ()=>{
        location.hash = "#movie=" + readMovies.id
})
     })
}

codigo de la funcion asincrona getTrendingMovies:

async function getTrendingMovies(){
    const res = await fetch("https://api.themoviedb.org/3/trending/movie/day?api_key=7258b971a0e753650d55f93fb1949de7")//el numero /3/ es la version de la api
    const data = await res.json()
    const movies = data.results
    maxPage = data.total_pages

    createMovies(movies, genericSection, true)
} 

parte del codigo css donde se añade altura a las imagenes de peliculas:

.movie-img {
  border-radius: 8px;
  min-height: 180px; /*poner un alto minimo a cada elemento img permite que la tecnica lazy loading fucione correctamente al hacer scroll vertical*/
}

Podrías intentar agregando la propiedad

BrandArgel gracias por la respuesta. Hice lo que dijiste pero no funciono. He buscado en internet y el error mas comun que las personas tienen con el atributo loading = lazy es que no ponen altura o anchura a la imagen que es lo que explico el profesor en esta clase. Asi que todavia sigo con la duda.

Hola, has probado con otro navegador? si estas usando Mozilla, fijate en probarlo en Chrome!! En mi caso en chrome me funcionar y en mozilla carga todo (en vista vertical de tendencias, pero en horizontal si funciona). Si logro saber la causa, luego les aviso. Muchas gracias.

Hola matiasrivero40 yo uso el navegador edge y ahi fue donde probe el lazy loading usando el atributo html loading = “lazy”. Segun vi en la pagina web [https://caniuse.com/?search=lazy] ese atributo html para aplicar lazy loading es soportado por los navegadores chrome y edge desde el año 2020 pero firefox no tiene un soporte completo de esa funcionalidad por esa razon debe ser que te falla en firefox.