使用 Javascript 進行圖像加載檢測

Question

我的網站上有很多圖片（分為 5 個類別），因此加載速度很慢。

I set every image with Attribute "data-src" containing its real source, and I update its source attribute with this "data-src" attribute for every image in this categroy (inside a for loop), whenever the relevant category is chosen (點擊）。

HTML：

<img loading="lzay" class="post_image" data-src="https://i.ibb.co/FswR5KB/Pics-Art-06-22-07-48-49.jpg" src="https://i.ibb.co/FswR5KB/Pics-Art-06-22-07-48-49.jpg">

JAVASCRIPT：

for(i = 0; i< selection.length; i++){
            let data_src = selection[i].children[2].getAttribute("data-src");;
            selection[i].children[2].src = data_src;
        }

我如何判斷一個類別的所有圖像何時加載到站點？ （一些代碼在 for 循環完成后繼續運行，但並非所有圖像都已加載，我希望代碼的 rest 只有在它們加載到頁面后才會觸發）。

Answer 1

試試這個。 我沒有太多時間想出它，但它可能會奏效。 抱歉，如果沒有。

index.html

<img id="img1" src="https://i.ibb.co/FswR5KB/Pics-Art-06-22-07-48-49.jpg"/>
<img id="img2" src="https://i.ibb.co/FswR5KB/Pics-Art-06-22-07-48-49.jpg"/>
<img id="img3" src="https://i.ibb.co/FswR5KB/Pics-Art-06-22-07-48-49.jpg"/>
<script type="text/javascript" src="script.js"></script>

腳本.js

const img1 = document.getElementById("img1");
const img2 = document.getElementById("img2");
const img3 = document.getElementById("img3");

const imgArray = [
  img1,
  img2,
  img3
]

let imgsLoaded = 0;

for (let i = 0; i < imgArray.length; i++) {
  imgArray[i].onload = function () {
    imgsLoaded++;
  }
  if (imgsLoaded >= imgArray.length) {
    // all images are loaded
  }
}