Большинство изображений в Интернете излишны. Если бы я мог немного придумать, 99% из них вовсе не так полезны (хотя есть редкие исключения). Это потому, что изображения не часто дополняют текст, который он должен поддерживать, и вместо этого повреждены пользователей, требуя навсегда загружать и взорвать ограничения данных, как какой -то налог на производительность.

, к счастью, это в основном проблема дизайна сегодня, потому что создание изображений исполняемыми и более удобными для пользователя намного проще, чем когда-то. У нас есть лучшие форматы изображений, такие как Whebp (и вскоре, возможно, JPEG XL). У нас есть магия, отвечающие на образы, курс. И есть множество отличных инструментов, таких как ImageOptim, а также такие ресурсы, как новая книга Адди Османи.

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

это изображение будет загружаться только тогда, когда пользователь прокручивает страницу, поэтому оно видно для пользователя - который удаляет его с начальной загрузки страницы, и это просто здорово! Создание этой начальной нагрузки на веб -страницу Lightsast - это большое дело.

, но, может быть, есть изображения, которые должны никогда не загружать вообще. Возможно, есть ситуации, когда было бы лучше, если бы человек мог бы увидеть это. Вот один из примеров: возьмите только текстовую версию, чтобы немного нажать. Разве это не ... просто так здорово?! Это читаемо! Повсюду нет мусора, он уважает меня как пользователя и - сладкие небеса - это быстро . ]

]

]

]

]

document.querySelectorAll("img").forEach((item) => {
  item.addEventListener("click", (event) => {
    const image = event.target.getAttribute("data-src");
    event.target.setAttribute("src", image);
  });
});

]

Фу. В некоторых браузерах в нижней части будет крошечный значок изображения, когда изображение не загружено. Проблема здесь заключается в том, что браузеры не дают вам способа удалить сломанный значок изображения с помощью CSS (и нам, вероятно, нельзя допустить, чтобы все равно было разрешено). Это тоже немного раздражает, чтобы стилизовать текст альт. Но если мы полностью удалим атрибут ALT, то разбитый значок изображения исчез, хотя это делает непригодным для JavaScript. Итак, удаление этого альт-текста-это не ходу. ]

ugh . Я не думаю, что есть способ заставить этот метод работать (хотя, пожалуйста, докажите, что я не так!). ]

]

document.querySelectorAll("img").forEach((item) => {
  item.addEventListener("click", (event) => {
    const image = event.target.getAttribute("data-src");
    event.target.setAttribute("src", image);
  });
});