Javascript – не отрабатывает cобытие on load – GTAlex о работе в сети и не только

Для удобной работы при заказе изображений для фотообоев на сайте Декор Имидж я разрабатывал соответствующий функционал – при вводе размеров изображение разбивается на полосы с указанием размеров.

НО на сайте обнаружился неприятный баг – при переходе на детальную страницу данный функционал работал раз через два – то разобъёт на полосы, то нет.
Причём чаще нет, чем да.

После изучения данной проблемы я экспериментальным путём пришел к выводу, что событие on load к которому я привязывал процедуру по работе с изображением отрабатывало не перманентно.
С коллегами с форума программистов (пост), выяснилось, что событие не отрабатывает если изображение “подтягивается” из кэша браузера (что по моему мнению конечно же недоработка).

Ниже рабочее решение – смысл в том, что для 100% отрабатывания события on load атрибут SRC картинки сначала мы обнуляем, а потом после присвоения с нужным адресом уже слушаем событие load.

/**
 * TAP-версия загрузки изображения по HTTP
 * @param {string} url Строка URL
 * @returns {Promise<void>} Обещание, не возвращающее результат
 */
function loadImgAsync(img, url) {
    return new Promise((resolve, reject) => {
        img.addEventListener(“load”, function loadHandler() {
            img.removeEventListener(“load”, loadHandler);
            resolve();
        });
        img.addEventListener(“error”, function errorHandler() {
            img.removeEventListener(“error”, errorHandler);
            reject(new Error(“Ошибка загрузки изображения с адреса: ” + url));
        });
        img.setAttribute(“src”, “”); // Сделать, чтобы картинка точно грузилась
        img.setAttribute(“src”, url);
    });
}
let img = document.querySelector(“img”);
// img.onload = () => { console.log(“Картинка загрузилась. Обрабатываю.”); };
console.log(img.complete);
 
document.querySelector(“#btn”).onclick = btn_click;
 
async function btn_click() {
    let url = “wallpaper.jpg”;
    // let url = “https://dekorimage.ru/upload/iblock/c24/c24e87409cfc786486cd5f3fe893f3cf.jpg”;
    // let url = “https://dekorimage.ru/upload/iblock/596/596c1129512974610c3a281a99f03db2.jpg”;
    //let url = “https://cyberstatic.net/images/cyberforum_logo.png”;
    try {
        await loadImgAsync(img, url);
        console.log(“Картинка загружена. Обработка.”);
    }
    catch (error) {
        console.log(error.message);
    }
}

/**

* TAP-версия загрузки изображения по HTTP

* @param {string} url Строка URL

* @returns {Promise<void>} Обещание, не возвращающее результат

function loadImgAsync(img, url) {

return new Promise((resolve, reject) => {

img.addEventListener(“load”, function loadHandler() {

img.removeEventListener(“load”, loadHandler);

resolve();

});

img.addEventListener(“error”, function errorHandler() {

img.removeEventListener(“error”, errorHandler);

reject(new Error(“Ошибка загрузки изображения с адреса: “ + url));

});

img.setAttribute(“src”, “”); // Сделать, чтобы картинка точно грузилась

img.setAttribute(“src”, url);

});

}

let img = document.querySelector(“img”);

// img.onload = () => { console.log(“Картинка загрузилась. Обрабатываю.”); };

console.log(img.complete);

document.querySelector(“#btn”).onclick = btn_click;

async function btn_click() {

let url = “wallpaper.jpg”;

// let url = “https://dekorimage.ru/upload/iblock/c24/c24e87409cfc786486cd5f3fe893f3cf.jpg”;

// let url = “https://dekorimage.ru/upload/iblock/596/596c1129512974610c3a281a99f03db2.jpg”;

//let url = “https://cyberstatic.net/images/cyberforum_logo.png”;

try {

await loadImgAsync(img, url);

console.log(“Картинка загружена. Обработка.”);

}

catch (error) {

console.log(error.message);

}

Javascript – не отрабатывает cобытие on load

Добавить комментарий Отменить ответ