0

I added the lazyload to the image tags. Saw the loading and then the actual image. I was shocked to see the code change (src, lazyloaded) when viewing the source code.

Source code:

<img src="/assets/img/1px.png" data-src="/assets/img/comparison/esg-father-son1.jpg?v=20200927" class="lazyload" alt="ESG." />

Desktop output:

<img src="assets/img/comparison/esg-father-son1.jpg" data-src="assets/img/comparison/esg-father-son1.jpg?v=20200927" class= "lazyloaded" alt="ESG" />

Why are the src part and the src part from the browser's source code different?

It seems like the lazyloading was working. It begs the question, Why the desktop did not show the 1px image on the source code of the browser?

Kinglish
  • 23,358
  • 3
  • 22
  • 43
Sam Mah
  • 31
  • 6
  • It just happened faster than you anticipated - the data-src was loaded in and superseded the original src. What I find interesting is that the cachekiller `?v=20200927` wasn't brought over into `src` – Kinglish Nov 20 '22 at 22:56
  • "*when viewing the source code*" - what exactly where you viewing? Did you inspect the DOM, or did you actually view the source of the page? – Bergi Nov 20 '22 at 23:01
  • you should add width and height to the img, when the img knows its size, you then use `lazyload` to set `object-fit:cover` to scale up the 1px image, else its just a 1px image – Lawrence Cherone Nov 20 '22 at 23:52
  • @kinglish It shows the same images in the src and data-src, so there wasn't nothing wrong with the src code? – Sam Mah Nov 21 '22 at 05:39
  • @Bergi, I right click and and inspect the source code from the browser – Sam Mah Nov 21 '22 at 19:45
  • @SamMah Which browser are you using? And do you use "view source code" or "inspect element"? If you're unaware of the differences, it might help to post a screenshot even. – Bergi Nov 21 '22 at 20:09
  • 1
    @Bergi, I noticed the difference between the two. When inspecting, I saw the 1px image on the source code and the actual image appears on both src and data-src. I understand now. – Sam Mah Nov 22 '22 at 15:58

0 Answers0