у меня есть этот код
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.
Что я делаю неправильно? спасибо за совет
Извините за мой плохой выбор слов.
Обновлено: оба решения работали так хорошо, что я выбрал тот, которому действительно нужно меньше кода. Большое спасибо!
Не уверен, что делает 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 сюда не входит;
Если вы можете добавить атрибут onload (в редакторе), вы можете удалить атрибут класса, так что я предполагаю, что вы не просто добавили onload в этот элемент, но вам нужно использовать JavaScript, поэтому, пожалуйста, покажите нам минимальный, но полный пример.