Retina görüntüleri ile tembel yükleme?

Question

Retina image @ 2x ve @ 3x ile bu temel tembel yükleme komut dosyasına sahibim.

(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>

tarayıcı

cihazın piksel oranına bağlı olarak yüklemek için hangi görüntü belirler. Buna göre
:

• tarayıcı yükleme olan görüntü tanımak için en iyi yöntem nedir?
• Sahip olduğum her retina görüntüsü için özel bir öznitelik ayarlamak zorunda mıyım?
• Genel olarak, retina görüntüleri ile tembel yükleme görüntüleri kullanarak çözmek için en iyi yaklaşım ne olacak?

Answer 1

Bu, Tüm Tarayıcılar ve IE7 + ile uyumlu çok güzel bir tembel yükleme eklentisi satın almanıza yardımcı olabilir.

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

Answer 2

1) tarayıcı yüklenirken hangi resim görmek için buraya referans: Is it possible to see which srcset image a browser is using with browser developer tools

2) Şu durumlarda tembel sunucu veya statik HTML, gelen herhangi bir görüntü için özel özellik gerekecektir Eğer kullanıcı HiDPI ise algıladıktan sonra fonksiyonunda özelliğini ayarlayabilirsiniz yüklenirken, buraya bakın: https://coderwall.com/p/q2z2uw/detect-hidpi-retina-displays-in-javascript

3) Şahsen Blazy gibi bir kütüphane kullanmak istiyorsunuz: https://github.com/dinbror/blazy/