search

ApoorvSaxena / lozad.js

🔥 Highly performant, light ~1kb and configurable lazy loader in pure JS with no dependencies for responsive images, iframes and more
https://apoorv.pro/lozad.js/demo/
MIT License
7.46k stars 447 forks source link

Attribute-updating order in load() results in Safari loading images twice #99

Open bingeling opened 6 years ago

bingeling commented 6 years ago

The default function to load images first copies data-src to src, followed by data-srcset to srcset. This means the image tag gets updated twice: first with a src-attribute and then with a srcset-attribute. The result is Safari loading the image defined in the src-attribute and then also loading the best-suited image from the srcset, since for a short moment it is a default image tag before it becomes an image tag with a srcset.

I have tested this with Chrome and Safari; Safari was the only one to do this, but other browsers could be affected as well.

Solution: Change the order in which the attributes are updated, so that srcset is defined before src.

ApoorvSaxena commented 6 years ago

@bingeling can you share a codepen implementation, will be able to accept a PR if that works