Question

我要按顺序附加新的Image（）。
例如，

    netherlands_001.jpg,
    netherlands_002.jpg,
    netherlands_003.jpg,
    :
    :

当我不使用Onload时，图像将按顺序附加。
但是当我使用Onload时，iamgs不会按顺序附加。

下面是conole日志，您可以在其中看到图像追加顺序不正确。

    /C:/Users/TSUBYAM/Desktop/Web/images/netherlands/netherlands_008.jpg:1 GET file:///C:/Users/TSUBYAM/Desktop/Web/images/netherlands/netherlands_008.jpg net::ERR_FILE_NOT_FOUND
    Image (async) (anonymous) @ load_picture.js:19
    load_picture.js:17 Not Found: ../images/netherlands/netherlands_008.jpg
    load_picture.js:13 Found: ../images/netherlands/netherlands_006.jpg
    load_picture.js:13 Found: ../images/netherlands/netherlands_001.jpg
    load_picture.js:13 Found: ../images/netherlands/netherlands_003.jpg
    load_picture.js:13 Found: ../images/netherlands/netherlands_005.jpg
    load_picture.js:13 Found: ../images/netherlands/netherlands_004.jpg
    load_picture.js:13 Found: ../images/netherlands/netherlands_002.jpg
    load_picture.js:13 Found: ../images/netherlands/netherlands_007.jpg

当找到不存在的图像路径时，我也想退出循环。

    netherlands_001.jpg,
    netherlands_002.jpg,
    netherlands_003.jpg,
    netherlands_004.jpg, # If not exist, I want to exit the loop here. 
    netherlands_005.jpg, # Then I don't need to load this image.
    :
    :

我无法退出循环，所以我改用'style.display = none'。所以我不会显示不存在的图像。

这是我的代码。

    let file_name = window.location.href.split('/').pop();
    let country = file_name.split(/\./)[0];
    let parent_img = document.getElementsByClassName("pic")[0];

    for ( var i = 0; i < 8; i++)
    {
        // get file image
        let pic_num  = ("000" + (i + 1)).slice(-3);
        let pic_name = `${country}_${pic_num}.jpg`;
        let pic_path = "../images/" + country + "/" + pic_name;

        let newImage = new Image();

        newImage.onload = function(){
            console.log(`Found: ${pic_path}`);
        }
        newImage.onerror = function(){
            this.style.display = 'none';
            console.log(`Not Found: ${pic_path}`);
        }
        newImage.src = pic_path;
        newImage.alt = pic_name;
        parent_img.appendChild(newImage);
    }

Answer 1

如果将循环放入cd /home/zaid/Desktop/NISGUIPythonServer ; env "PYTHONIOENCODING=UTF-8" "PYTHONUNBUFFERED=1" /usr/bin/python3 /home/zaid/.vscode/extensions/ms-python.python-2019.1.0/pythonFiles/ptvsd_launcher.py --default --client --host localhost --port 43531 /home/zaid/Desktop/NISGUIPythonServer/Main_Form.py函数中，则可以将async（或await）中的每个onload转换为onerror：

Promise

另一种方法是使用(async () => { const file_name = window.location.href.split('/').pop(); const country = file_name.split(/\./)[0]; const parent_img = document.querySelector(".pic"); for (let i = 0; i < 8; i++) { // get file image const pic_num = ("000" + (i + 1)).slice(-3); const pic_name = `${country}_${pic_num}.jpg`; const pic_path = "../images/" + country + "/" + pic_name; const newImage = new Image(); try { newImage.src = pic_path; newImage.alt = pic_name; await new Promise((resolve, reject) => { newImage.onload = function() { console.log(`Found: ${pic_path}`); resolve(); } newImage.onerror = function() { console.log(`Not Found: ${pic_path}`); reject(); } }); } catch(e) { // reject was called, break out of the loop: break; } parent_img.appendChild(newImage); } })();并行请求所有图像，大大加快了加载速度，但只有在所有图像都成功的情况下才追加它们：

Promise.all

如何在循环中使用image onload？

1 个答案: