Удаление класса css тега <img> после его загрузки

у меня есть этот код

out.print("<img class=\"blurry-load\"  style=\"margin:0px;border:0px;padding:0px;left:0px;top:0px;\" id=\"" + getId() + "\" " + 
              " onmousedown=\"registraPosicion(event);\"   ondragstart=\"registraPosicion(event);\" ondrag=\"reposiciona(event);\" ondragend='setTimeout(\"registraPosFinal();\",500);\" 'onload='loaded((this.id).removeClass(\"blurry-load\"));'" + 
              "src=\"" + request.getContextPath() + "/imagestore/" + newFileName + 
              "?" + getNode() + " = " + selectId + "&" + "image.index" + " = " + fileIndex + "\" width=\"" + widthSize + 
              "\" height=\"" + heightSize + "\" alt=\"Tamaño " + widthSize + " x " + heightSize + "\">");

Мне нужно, чтобы класс img css имел единственную цель - размыть изображение при загрузке (размытая загрузка), удалить его из этого изображения после загрузки, чтобы выполнить эту работу, мне нужно выяснить:

1.- Как удалить эффект (class="blurry-load") из тега img

2.- я пробовал с ('onload='loaded((this.id).removeClass("blurry-load"));'") в приведенном выше коде, но изображение все еще размыто после загрузки.

3.- Об ужасном формате тега img, потому что этот тег отправляется из метода java в jsp.

Что я делаю неправильно? спасибо за совет

Извините за мой плохой выбор слов.

Обновлено: оба решения работали так хорошо, что я выбрал тот, которому действительно нужно меньше кода. Большое спасибо!

Если вы можете добавить атрибут onload (в редакторе), вы можете удалить атрибут класса, так что я предполагаю, что вы не просто добавили onload в этот элемент, но вам нужно использовать JavaScript, поэтому, пожалуйста, покажите нам минимальный, но полный пример.

A Haworth 17.02.2023 02:48
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
2
1
55
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Не уверен, что делает loaded, но если вы попробуете onload = "this.classList.remove('blurry-load')", он должен удалить класс.

.blurry-load {
  filter: blur(10px);
}
<img
  class = "blurry-load"
  src = "https://source.unsplash.com/random"
  onload = "this.classList.remove('blurry-load')"
>

Возможно, вам следует проверить ошибку инструментов разработки браузера и установить какой-либо HTTP-заголовок на вашем сервере;

Предположим, вы загрузили((this.id).removeClass("blurry-load")); может хорошо работает. Пока я использовал

onload='this.classList.remove(\"blurry-load\")'

вместо.

var dom = "<img class=\"blurry-load\"  style=\"margin:0px;border:0px;padding:0px;left:0px;top:0px;\" id=\"123\" " +
    " onmousedown=\"registraPosicion(event);\"   ondragstart=\"registraPosicion(event);\" ondrag=\"reposiciona(event);\" ondragend='setTimeout(\"registraPosFinal();\",500);\" ' onload='this.classList.remove(\"blurry-load\")'" +
    "src=\"https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_92x30dp.png\">"
    ;
  document.body.innerHTML = dom;

Я попытался вызвать свой код на странице поиска Chrome, и получил следующую ошибку.

Refused to execute inline event handler because it violates the following Content Security Policy directive: "script-src 'nonce-PxTqxbqt1d1UAo7im3idcw' 'strict-dynamic' 'report-sample' 'unsafe-eval' 'unsafe-inline' https: http:". Note that 'unsafe-inline' is ignored if either a hash or nonce value is present in the source list.

Это из-за того, что для заголовка Google HTTP установлено значение

content-security-policy: object-src 'none';base-uri 'self';script-src 'nonce-PxTqxbqt1d1UAo7im3idcw' 'strict-dynamic' 'report-sample' 'unsafe-eval' 'unsafe-inline' https: http:;report-uri https://csp.withgoogle.com/csp/gws/cdt1

unsafe_hashes сюда не входит;

Другие вопросы по теме