图srcset加载图像时，浏览器的一半图像尺寸

问题描述：

（使用最新版本的Firefox）的图srcset加载图像时，浏览器的一半图像尺寸

我有我写的img像这样：

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

和我CSS-

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

.backgroundImage 
    opacity: 0 

.loaded 
    opacity: 1 
    animation: fadeIn 3s

当我的浏览器是在960px，它加载1920图像。在512px它加载1024图像。任何更高的和它加载2560图像。

我，究竟如何它决定在这些宽度加载这些图像时，我有sizes设置为100vw很困惑。不应该使用1024图片，直到浏览器宽度为1024px，1920图片的浏览器宽度从1024px - 1920px和2560 img的任何一个更高时？我在这里误解了什么吗？

编辑：行为也发生在Chrome的最新版本，除了在除了原有的问题它装载在此外较小的图像 - 每次到2560形象！

edit2：最新版本的Safari的行为与Firefox相同。

编辑3：发现一个fiddle由别人测试。它的行为方式相同（在浏览器宽度为图像大小的50％之前不使用较小的图像）。这是一个错误？或预期的功能srcset & sizes？

需要看到代码此功能：'imageLoaded（本）'和可能的'.backgroundImage' CSS为好。 – zer00ne

我编辑了原帖。对不起，我不认为它们是相关的。 – shanling

不用担心，我认为这个功能可能会让你失望，让我们来看看...... – zer00ne

答

好了，好了（其中有大约与一个旧的Safari浏览器版本异常的同样的支持）是使用<picture>标签等，从而为我工作的解决方案：

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

它加载所有的图像在所有最新版本的浏览器的正确断点处正确显示。

答

我的工作更加理智，媒体查询和sizes上设置的长度。我在iPhone上看到img突破2560w，但那是因为视网膜的像素密度。为了让断点更紧密，您需要添加更多的媒体查询。

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

图srcset加载图像时，浏览器的一半图像尺寸

相关推荐