• Priority: 0
  • Status: Waiting on customer
  • Theme: Alysum
  • Assigned To: Fred
  • Private: No
  • Open Date: 15.01.23, 00:54
  • Opened by: Wojciech

Ticket #24151 - Problem with lazy loading - still visible

When i’m using product image without background i see lazy image loader. Looks like lazy loader not turning off when the image was loaded.

Attachments:

Comments

Fred 15 Jan 2023, 10:14

Hi, Wojciech.
Please give me a link to a page where I can see that, because there is no loader on product page https://dev.furmeb24.pl/strona-glowna/4-test.html

Wojciech 15 Jan 2023, 19:23

Hi Fred, thanks for your reply. You can see it on homepage: https://dev.furmeb24.pl/ If you scroll down you see elementor block “produkty asd” and there is a product miniature with transparent background. Additional if you scroll more down you can see this same problem in block under “Our brands”.
Additional can you tell me how to change url for favorite items? At this moment it’s: https://dev.furmeb24.pl/favorites i wanna change it for: https://dev.furmeb24.pl/ulubione

Fred 16 Jan 2023, 18:44

Sorry, but I don’t see the issue - https://take.ms/NTiIa

As for the Favorites url:
- open the file /modules/pkfavorites/pkfavorites.php
- find the line

'rule'       => 'favorites',

and change it to

'rule'       => 'ulubione',
Wojciech 16 Jan 2023, 21:56

I try to reproduce this bug in Incognito mode that’s steps to reproduce:
1. Open home page and scroll to the “Produkty asd” block at this moment all looks great (like on your screen)
2. Click to image and redirect to product page,
3. Click on logo to go back on homepage and scroll down to problematic block and looks like on screen in attachment.
On screen i marked the loader which is visible on photo without background in dev tools this is (screen 2):

img[src$='.jpg'][loading='lazy']:not(.loaded), .pk-loader {
    background: url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIA0KICAgIGNsYXNzPSJzdmctbG9hZGVyIiANCiAgICB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIA0KICAgIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiANCiAgICB4PSIwcHgiIA0KICAgIHk9IjBweCINCiAgICB2aWV3Qm94PSIwIDAgODAgODAiIA0KICAgIHhtbDpzcGFjZT0icHJlc2VydmUiDQogICAgc3R5bGU9IndpZHRoOjMwcHg7IGhlaWdodDozMHB4OyINCiAgICA+DQoNCiAgICA8cGF0aA0KICAgICAgICBpZD0ic3Bpbm5lciIgDQogICAgICAgIGZpbGw9IiM2NjY2NjYiDQogICAgICAgIGQ9Ik00MCw3MkMyMi40LDcyLDgsNTcuNiw4LDQwQzgsMjIuNCwyMi40LDgsNDAsOGMxNy42LDAsMzIsMTQuNCwzMiwzMmMwLDEuMS0wLjksMi0yLDIgcy0yLTAuOS0yLTJjMC0xNS40LTEyLjYtMjgtMjgtMjhTMTIsMjQuNiwxMiw0MHMxMi42LDI4LDI4LDI4YzEuMSwwLDIsMC45LDIsMlM0MS4xLDcyLDQwLDcyeiI+DQoNCiAgICAgICAgPGFuaW1hdGVUcmFuc2Zvcm0NCiAgICAgICAgICAgIGF0dHJpYnV0ZVR5cGU9InhtbCINCiAgICAgICAgICAgIGF0dHJpYnV0ZU5hbWU9InRyYW5zZm9ybSINCiAgICAgICAgICAgIHR5cGU9InJvdGF0ZSINCiAgICAgICAgICAgIGZyb209IjAgNDAgNDAiDQogICAgICAgICAgICB0bz0iMzYwIDQwIDQwIg0KICAgICAgICAgICAgZHVyPSIwLjZzIg0KICAgICAgICAgICAgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiDQogICAgICAgIC8+DQogICAgPC9wYXRoPg0KPC9zdmc+) 50% 50% no-repeat;
    background-size: 50px;
}
Fred 16 Jan 2023, 22:07

I have tried to reproduce using your steps but can’t see it.
To disable loader, try following CSS

img[src$='.jpg'][loading='lazy'] {background: none !important}