Question

围绕Picturefill polyfill的一些初学者问题：

当我使用src属性时，我注意到Firefox（33）和Safari（7.1）中的短暂闪烁。这些浏览器会发出额外的HTTP请求。这是我的代码：

<img src="images/300x180-1.jpg"
    alt="My alt text"
    sizes="(min-width: 768px) 364px, 100vw"
    srcset="images/364x220@2x-1.jpg 728w, images/364x220-1.jpg 364w" />

图片填充是否应该阻止浏览器下载不必要的图片？
删除src属性有什么缺点吗？（我知道有JS关闭的人或没有原生响应式图像的浏览器根本没有看到任何图像，只有alt文本）
缺少src属性对SEO有什么影响？

Answer 1

您只能在Chrome中中止图像下载，即不在ff或safari中。
preload解析器看不到没有src的图像，规范要求src属性（你已经提到JS了）

关于您的图片标记。 300和364之间的差异非常小。不要以为它实际上给你带来了很大的不同。但是，如果你想保留它，将它添加到srcset也是很好的，这样浏览器就可以知道它的属性（如果屏幕非常小或带宽很低的话，可以使用它）。

<img src="images/300x180-1.jpg"
    alt="My alt text"
    sizes="(min-width: 768px) 364px, 100vw"
    srcset="images/364x220@2x-1.jpg 728w, images/364x220-1.jpg 364w, images/300x180-1.jpg 300w" />

您还可以尝试使用respimage，试图在IE中中止图像下载，并等待更长时间来更改safari / firefox中的源代码（实现低质量图像占位符技术）。此外，它还通过使用更智能的资源选择来节省带宽。

Answer 2

缺少src属性对SEO有什么影响？

使用Google的Google提取工具进行测试，可以看出，默认情况下，Google不会为srcset属性中引用的文件编制索引，但会将其编入索引如果使用Picturefill。

我已经在Stack Exchange网站管理员here

上撰写了更全面的答案

没有src属性的Picturefill？

2 个答案: