2017-08-19 65 views
6

Mam ten prosty leniwy skrypt ładujący z obrazem siatkówki @ 2x i @ 3x.Lazy loading with retina Images?

(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/[email protected] 2x, 
 
      https://s3-eu-west-1.amazonaws.com/cornerjob-cdn/[email protected] 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?
+0

Wypróbuj tę wtyczkę jQuery: [jQuery Lazy] (http://jquery.eisbehr.de/lazy/example_retina-image-support) – Animay

+0

@Animay Chciałbym własne rozwiązanie, nawet nie używam jquery – JoseAPL

Odpowiedz

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/

+0

Muszę to zrozumieć, zanim obecny zestaw src został załadowany, dlatego jest to leniwy ładunek (bazuje na gęstości pikseli urządzenia), a ja raczej własną implementację do tego. Chcę uniknąć korzystania z bibliotek stron trzecich – JoseAPL