Lazy loading with retina Images?

Question

Mam ten prosty leniwy skrypt ładujący z obrazem siatkówki @ 2x i @ 3x.

(function(doc) { 
 
    var div = doc.querySelector('div'); 
 
    var img = doc.querySelector('img[data-src]'); 
 

 
    img.onload = function() { 
 
    img.removeAttribute('data-src'); 
 
    div.classList.add('done'); 
 
    }; 
 

 
    img.setAttribute('src', img.getAttribute('data-src')); 
 
})(document);

img { 
 
    width: 300px; 
 
    margin: 0 auto; 
 
    display: block; 
 
} 
 

 
img { 
 
    opacity: 1; 
 
    transition: opacity 0.3s; 
 
} 
 

 
img[data-src] { 
 
    opacity: 0; 
 
} 
 

 
div { 
 
    position: relative; 
 
    min-height: 222px; 
 
} 
 

 
div:after { 
 
    content: ''; 
 
    position: absolute; 
 
    width: 50px; 
 
    height: 50px; 
 
    border-radius: 50%; 
 
    border-top: 1px solid #9a9a9a; 
 
    border-left: 1px solid #9a9a9a; 
 
    top: 50%; 
 
    left: 50%; 
 
    margin-top: -25px; 
 
    margin-left: -25px; 
 
    animation: id 1s linear infinite both; 
 
} 
 

 
div.done:after { 
 
    display: none; 
 
} 
 

 
@keyframes id { 
 
    to { transform: rotateZ(360deg) } 
 
}

<div> 
 
    <img 
 
    src="https://s3-eu-west-1.amazonaws.com/cornerjob-cdn/background.png" 
 
    data-src="https://s3-eu-west-1.amazonaws.com/cornerjob-cdn/background.png" 
 
    srcset="https://s3-eu-west-1.amazonaws.com/cornerjob-cdn/background@2x.png 2x, 
 
      https://s3-eu-west-1.amazonaws.com/cornerjob-cdn/background@3x.png 3x"> 
 
</div>

Przeglądarka określa, które można załadować obraz w zależności od proporcji piksela urządzenia.
Zgodnie z tym:

• Jaka jest najlepsza praktyka, aby rozpoznać, który obraz jest ładowanie przeglądarka?
• Czy muszę ustawić niestandardowy atrybut dla każdego obrazu siatkówki, który mam?
• Ogólnie, jakie będzie najlepsze rozwiązanie w przypadku leniwego ładowania obrazów za pomocą obrazów siatkówki?

Answer 1

Może to pomóc w pobraniu bardzo ładnej leniwej wtyczki do ładowania Kompatybilny z wszystkimi przeglądarkami i IE7 +.

http://luis-almeida.github.io/unveil/

Answer 2

1) Aby sprawdzić, który obraz przeglądarka ładuje odniesienie tutaj: Is it possible to see which srcset image a browser is using with browser developer tools

2) Trzeba będzie atrybut niestandardowy dla każdego obrazu, który pochodzi z serwera lub HTML statycznych, gdy leniwy ładowania można ustawić właściwość w funkcji po wykryciu, jeżeli użytkownik jest HiDPI, zobacz tutaj: https://coderwall.com/p/q2z2uw/detect-hidpi-retina-displays-in-javascript

3) Osobiście chciałbym użyć biblioteki jak Blazy: https://github.com/dinbror/blazy/