Img chargement des images srcset lorsque le navigateur à la moitié de la taille de l'image

(en utilisant la dernière version de Firefox)Img chargement des images srcset lorsque le navigateur à la moitié de la taille de l'image

J'ai mon img écrit comme ceci:

<body> 
    <script> 
     function imageLoaded(img) { 
      console.log('the responsive image is loaded'); 
      img.className += ' loaded'; 
     } 
    </script> 

    <img class="backgroundImage" 
     onload="imageLoaded(this)" 
     src="assets/water_bg_1920.jpg" 
     sizes="100vw" 
     srcset="assets/water_bg_2560.jpg 2560w, 
       assets/water_bg_1920.jpg 1920w, 
       assets/water_bg_1024.jpg 1024w"/> 
</body>

et mon CSS-

@keyframes fadeIn 
    0% 
    opacity: 0 
    100% 
    opacity: 1 

.backgroundImage 
    opacity: 0 

.loaded 
    opacity: 1 
    animation: fadeIn 3s

Lorsque mon navigateur est au 960px, il charge l'image 1920. Au 512px, il charge l'image 1024. Quelque chose de plus élevé et il charge l'image 2560.

Je suis très confus quant à exactement comment il est décidé de charger ces images à ces largeurs lorsque j'ai sizes ensemble à 100vw. Ne devrait-il pas utiliser l'image 1024 jusqu'à ce que la largeur du navigateur soit 1024px, l'image 1920 lorsque la largeur du navigateur est de 1024px - 1920px et que la valeur de 2560 img est supérieure? Suis-je mal compris quelque chose ici?

modifier: le comportement se produit également dans la dernière version de Chrome, sauf en plus du problème d'origine, il est chargement de l'image 2560 en plus à la plus petite image- à chaque fois!

edit2: dernière version de Safari se comporte comme Firefox.

edit3: trouvé fiddle effectué par quelqu'un d'autre test. il se comporte de la même manière (n'utilise pas l'image la plus petite jusqu'à ce que la largeur du navigateur soit égale à 50% de la taille de l'image). est-ce un bug? ou une caractéristique prévue de srcset & sizes?

Source

2016-09-28 shanling

Besoin de voir le code pour cette fonction: 'imageLoaded (ce)' et éventuellement le CSS pour '.backgroundImage' ainsi. – zer00ne

J'ai modifié le message original. Désolé, je ne pensais pas qu'ils étaient pertinents. – shanling

Pas de soucis, je pense que c'est la fonction qui vous décourage probablement, voyons ... – zer00ne

Bon, bien la solution qui a fonctionné pour moi (qui a à peu près le même support, à l'exception d'une ancienne version Safari) est d'utiliser la balise <picture> comme ceci:

<picture class="backgroundContainer"> 
    <source srcset="assets/water_bg_1024.jpg" media="(min-width: 0px) and (max-width:1024px)"> 
    <source srcset="assets/water_bg_1920.jpg" media="(min-width: 1025px) and (max-width: 1920px)"> 
    <source srcset="assets/water_bg_2560.jpg" media="(min-width: 1921px)"> 
    <img class="backgroundImage" onload="imageLoaded(this)" src="assets/water_bg_1920.jpg" alt=""> 
</picture>

qui charge tous des images correctement aux bons points d'arrêt sur toutes les dernières versions des navigateurs.

Source

2016-09-28 21:06:10 shanling

Je devais travailler plus sainement, avec une requête média et une longueur définie sur le sizes. Je vois l'img breakout à 2560w sur mon iPhone, mais c'est à cause de la densité de pixel de la rétine. Pour obtenir des points d'arrêt plus serrés, vous devrez ajouter plus de requêtes média.

<!doctype html> 
 
<html> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 
    <title>sizes</title> 
 
</head> 
 

 
<body> 
 
    <img src="http://placehold.it/1024x576/000/fff?text=1024w" sizes="(min-width: 36em) 33.3vw, 100vw" srcset="http://placehold.it/2560x1280/00f/fc0?text=2560w 2560w, http://placehold.it/1920x1080/e00/fcf?text=1920w 1920w, http://placehold.it/1024x576/000/fff?text=1024w 1024w" /> 
 
</body> 
 

 
</html>

Source

2016-09-28 21:29:55 zer00ne

Img chargement des images srcset lorsque le navigateur à la moitié de la taille de l'image

Répondre

Questions connexes