Question 45285 in Html Question posted in
Some basic documentation can be found here.

Removing css class of the <img> tag after loading it – Html

I have this code

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 + "">");

i need that the img css class that only purpose is to blur the image while loading (blurry-load), get removed from that image after being loaded to make this work i need to figure out:

1.- How i can remove the (class="blurry-load") effect from the img tag

2.- i tried with (‘onload=’loaded((this.id).removeClass("blurry-load"));’"), in the above code but the image stills blured after being loaded.

3.- About the awfull format of the img tag, its bc this tag is sent from a java method in jsp.

What i am doing wrong? thanks in advice

Sorry for my poor choice of words.

Edit: Both solutions worked so fine, i selected the one who actually needs less code. Thank you so much!

Tags:

2

Answers


  1. 0

    Not sure what loaded does but if you try onload="this.classList.remove('blurry-load')", it should remove the class.

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

    Maybe you should check Browser dev-tools error and set some HTTP header in your server;

    Suppose your loaded((this.id).removeClass("blurry-load")); can works well.
    While I have used

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

    instead.

    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;

    I tried to invoke my code in Chrome search page, and I get an error below.

    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.

    enter image description here
    It’s because of Google HTTP header is setted to

    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 is not included in this;

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search