0

I am using setAttribute and getAttribute to display a higher resolution image. The src stores the low resolution image and data-src stores the high resolution image.

The HTML code would look something like this:

<img class="image" src="img/lowres.png" data-src="img/highres.png">

The javascript code would look something like this:

image.setAttribute("src",image.getAttribute("data-src"));

Do I have any access to run any code before the src changes into the data-src? For example fade out the src image and fade in the data-src image?

The code is executed on a button press.

  • 1
    You could monkeypatch HTMLElement.setAttribute to intercept the call, but that's a *really* weird thing to do – CertainPerformance Sep 14 '19 at 10:14
  • Interesting, is there a better way to go about this? I really wish to keep the ability to manually change the src and data-src. –  Sep 14 '19 at 10:15
  • 2
    I think you can do it by changing the class name with another which include an animation – matrixersp Sep 14 '19 at 10:17
  • @CertainPerformance The reason for asking is because I have a rather weird resizing issue with my lightbox. Previous post that goes into why I am asking this question: https://stackoverflow.com/questions/57930241/prevent-javascript-lightbox-to-rezises-the-src-to-the-data-src-before-its-displ –  Sep 14 '19 at 10:19
  • @matrixersp the idea with adding a new class is great. However, how would I run the new class as soon as the data-src is ready to show? –  Sep 14 '19 at 10:24
  • Instead of starting a new question to find some workaround you might want to add a [mcve] to your other question and get the source of the problem fixed. – Andreas Sep 14 '19 at 10:26

0 Answers0