Question

im在游戏评论家网站（个人项目）上工作，im使用rawg游戏api来获取游戏，但是从api加载图像需要花费很多时间，因此我尝试减少了im提取的图像数量（来自23至4），删除代码的全部部分（滑块）以查看其是否有所更改，将img更改为背景img，然后在其他计算机上尝试使用该网站（速度相同）。但是有时即使我清理缓存，图像也会“立即”加载

const sectionJeux = document.getElementById('jeux')

//show the 20 most popular games
function recupJeuPlusPopu(){
    fetch('https://api.rawg.io/api/games?dates=2019-10-01,2020-04-07&ordering=-added')
    .then(response => {
      return response.json()
    })
    .then(data => {
        for(let i=0;i<=19;i++){
            let lienPage = document.createElement('a')
            lienPage.setAttribute('href',"index.php?id="+data.results[i].id + "&action=pageJeu")
            sectionJeux.appendChild(lienPage)

            //div with game info
            let newDiv = document.createElement("div")
            newDiv.setAttribute("class","container-game")
            lienPage.appendChild(newDiv)


            //adding game image
            let divImage = document.createElement("div")
            divImage.setAttribute("class","container-img-jeu")
            newDiv.appendChild(divImage)
            let image = document.createElement("img")
            image.setAttribute("class","img-jeu")
            image.src=data.results[i].background_image
            divImage.appendChild(image)


            //adding name
            let divText = document.createElement("div")
            divText.setAttribute("class","container-text-jeu")
            newDiv.appendChild(divText)
            let titreJeu = document.createElement("h2")
            titreJeu.setAttribute("class","titre-jeu")
            titreJeu.innerHTML=data.results[i].name
            divText.appendChild(titreJeu)

            //adding the platform
            let divPlateformeJeu = document.createElement("div")
            divPlateformeJeu.setAttribute("class","plateforme-jeu")
            divText.appendChild(divPlateformeJeu)
            let a = 0;
            while(data.results[i].platforms[a]){
                let plateform = document.createElement("img")
                plateform.setAttribute("class","plateform")
                plateform.src= chooseIcon(data.results[i].platforms[a].platform.name)
                divPlateformeJeu.appendChild(plateform)
                a++
            }
            let containerGenres = document.createElement("div")
            containerGenres.setAttribute("class","container-genres")
            newDiv.appendChild(containerGenres)

            //adding tags
            let b = 0;
            while(data.results[i].genres[b]){
                let genres = document.createElement("p")
                genres.setAttribute("class","genres")
                genres.innerHTML=data.results[i].genres[b].name
                containerGenres.appendChild(genres)
                b++
            }
            //release date 
            let dateDeSortie = document.createElement("p")
            dateDeSortie.setAttribute("class","releaseDate")
            newDiv.appendChild(dateDeSortie)
            dateDeSortie.innerHTML = "Released on: " + data.results[i].released
        }
    })
}
recupJeuPlusPopu()

//show plateform icons 
function chooseIcon(text){
    if(text == "PlayStation 4"){
        return('images/ps4.png')
    }
    else if(text == "PC"){
        return('images/windows.png')
    }
    else if(text == "Xbox One"){
        return('images/xbox.png')
    }
    else if(text == "Nintendo Switch"){
        return('images/switch.png')
    }
    else if(text == "macOS"){
        return('images/mac.png')
    }
    else if(text == "Linux"){
        return('images/linux.png')
    }
    else if(text == "iOS" || text == "Android"){
        return('images/smartphone.png')
    }
}

Answer 1

Chrome支持延迟加载，可以平滑地同时加载20张图像。

   let image = document.createElement("img")
   image.setAttribute("class","img-jeu")
   image.setAttribute("loading","lazy")
   image.src=data.results[i].background_image
   divImage.appendChild(image)

图像需要花费很多时间才能加载

1 个答案: