Можно ли с помощью Java Script вывести вес (кб) изображений сайта?
Новичок в JS, появилась нужда узнать вес картинок на странице, например картинки выше 200кб выводились в консоль разработчика. C blob ничего не понял, объясните подробнее пожалуйста!
Ответы (2 шт):
Автор решения: Денис Степанов
→ Ссылка
Открываете devtools.
1.Заходите во вкладку network Открываете фильтр
(воронка слева наверху).
2. Выбираете в фильтре Img, чтобы отсеить все кроме картинок.
3. В строке фильтра вбиваете "larger-than:(размер фото)"
4. Обновляете страницу.
Пример: larger-than:1K - больше 1 кБайт, larger-than:200 - больше 200 байт.
Автор решения: Neolot
→ Ссылка
Принцип примерно такой:
- Выбираем все картинки.
- Обходим их в цикле и из каждой берем значение атрибута
src. - Делаем запрос на сервер и берем значение
'Content-Length'из заголовка ответа. - Выводим результат в консоль.
document.addEventListener('DOMContentLoaded', function(){
let imgs = document.getElementsByTagName('img'); // Выбираем все картинки на странице
let imgSrcs = [];
for ( let i = 0; i < imgs.length; i++ ) {
let xhr = new XMLHttpRequest(); // Делаем запрос на сервер для каждой картинки
xhr.open('HEAD', imgs[i].src, true);
xhr.onreadystatechange = function(){
if ( xhr.readyState == 4 ) {
if ( xhr.status == 200 && xhr.getResponseHeader('Content-Length') > 1024*200 ) {
console.log(imgs[i].src + ': ' + xhr.getResponseHeader('Content-Length') + ' bytes'); // Выводим сообщение в консоль, если вес картинки больше 200 Кб
}
}
};
xhr.send(null);
}
});