0

Всем привет, не подскажете почему счетчик counter не увеличивается при инкременте? По идее ведь у меня три картины и трижды должен сработать

function preloadImages(sources) {
    let counter = 0;

for (const source of sources) {
    let img = document.createElement('img');
    img.onerror = img.onload = () => {
        counter++;
    }
    img.src = source;
}

console.log(counter);



}


let sources = [
    "https://en.js.cx/images-load/1.jpg",
    "https://en.js.cx/images-load/2.jpg",
    "https://en.js.cx/images-load/3.jpg"
];


preloadImages(sources);

При проверке внутри цикла переменная увеличивается, но не выходит будто из этого цикла. Срабатывает если функцию отдельно написать для события. Событие не позволяет изменять значение внешней переменной или что?

Walter White
  • 3
  • 1

2 Answers2

0

ну по идее у вас все ок, просто загрузка изображений - код асинхронный, поэтому вы видите значение счётчика еще до того, как изображения были загружены (или произошла ошибка)

let counter = 0;
function preloadImages(sources) {

for (const source of sources) {
    let img = document.createElement('img');
    img.onerror = img.onload = () => {
        counter++;
    }
    img.src = source;
}




}


let sources = [
    "https://en.js.cx/images-load/1.jpg",
    "https://en.js.cx/images-load/2.jpg",
    "https://en.js.cx/images-load/3.jpg"
];


preloadImages(sources);


console.log("счётчик сразу после завершения выполнения функции:", counter);
setTimeout(() => console.log("счетчик по таймеру:", counter), 1000);
Zhihar
  • 37,513
-1

async function preloadImages(links) {
    let counter = 0;

async function createImage(link) {
    const img = document.createElement('img');
    img.src = link;
    return new Promise((resolve, reject) => {
        img.onload = () => {
            document.body.appendChild(img);
            resolve();
        };
        img.onerror = (e) => reject(e);
    });
}

for (const link of links) {
    try {
        await createImage(link);
        counter++;
        console.log(counter, link);
    } catch (e) {
        console.log('Ошибка загрузки изображения - ', link);
    }
}

return counter;



}


const links = [
    "https://en.js.cx/images-load/1.jpg",
    "https://en.js.cx/images-load/2.jpg 123",
    "https://en.js.cx/images-load/3.jpg"
];


preloadImages(links).then(count => {
    console.log('Изображений загружено: %s/%s', count, links.length);
});
MoloF
  • 4,588