JavaScript URL.revokeObjectURL() — звільнити пам'ять від тимчасової адреси

Статичний метод URL.revokeObjectURL() звільняє пам'ять, зайняту адресою з createObjectURL().

правити

Загальний опис

Браузер не може здогадатись, коли адреса стала непотрібною, — тож тримає файл у пам'яті, доки ти не скажеш прямо.

Але є тонкість із моментом виклику. Відкликати адресу одразу після присвоєння в src — надто рано: браузер ще не встиг завантажити зображення, і воно не покажеться. Правильно — в обробнику onload, коли картинка вже намальована.

Для завантаження файлу (<a download>) відкликати можна одразу після click() — браузер уже взяв дані.

правити

Порада

Для зображень клич його в onload, для завантажень — одразу після click(). Занадто ранній виклик тихо ламає обидва сценарії.

автор: NagarD правити

+ додати пораду чи нотатку

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
	125	—	—	111	—	—

Підтримка: мобільні переглядачі

Переглядач
	—	125	—	—

Приклади

+ запропонувати свій приклад у пісочниці

<img id="preview" width="120" alt="Прев'ю">

// Blob створюємо прямо тут — у житті це файл користувача
const svg = '<svg xmlns="http://www.w3.org/2000/svg" width="120" height="60"><rect width="120" height="60" fill="#0172ad"/></svg>';
const blob = new Blob([svg], { type: 'image/svg+xml' });

const img = document.getElementById('preview');
const url = URL.createObjectURL(blob);

img.src = url;

img.onload = () => {
    // звільняємо ЛИШЕ після завантаження
    URL.revokeObjectURL(url);
    console.log('Показано і звільнено');
};

// зарано звільниш — картинка може не встигнути показатись