问题标签 [srcset]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
2 回答
1964 浏览

php - 如何修改wordpress上的the_post_thumbnail函数?

首先:它甚至可能吗?

我想获得一个返回 srcset<img>标记的函数,以使我的 wordpress 布局响应。这对我来说很重要,因为我的 wrapper 是 1400 宽,这对于宽于 1400 @1 或 700 @2 的屏幕来说是很好的,但是对于手机来说太宽了,720px 的宽度对于@2 甚至@3 屏幕来说已经足够了(因为它们可以变得更清晰,但眼睛不会注意到太多)。

问题是我不知道在处理 php 时要提供哪种缩略图大小......所以我想使用srcset. 为此,我知道我必须在functions.php. 但是我应该怎么做以及怎么做?我应该修改the_post_thumbnail()功能吗?还是我应该创建一个新的?在这种情况下,如何从不同大小的帖子缩略图中获取不同的图像名称?

0 投票
2 回答
1056 浏览

css - CSS img srcset 纵向媒体查询

我有两张图片,一张用于横向,一张用于纵向。

使用<picture>,我可以使用标准媒体查询,但<picture>Safari 不支持,所以我想使用<img srcset>. 我找不到任何信息,如何在srcset.

有什么帮助吗?

0 投票
2 回答
1089 浏览

angularjs - ng-srcset 图像最初不会间歇性地显示在 IE11 中

页面加载时没有任何图像仅在 IE11 上显示,但是当我们间歇性地调整浏览器大小(1/3 加载)时会相应地刷新它们。我们无法使用任何其他浏览器复制此内容。srcset 本身可以很好地处理静态内容。

这是一个在 IE11 中不起作用的 Plunker 示例

或者快速简单,我们正在使用的实际 img html:

图像或周围的 div没有应用任何过渡、阴影或不透明度。

html 可以很好地通过角度传递并正确重写 srcset 属性。图像只是没有出现,只有 alt 标签。想知道这是否可能是由于它的间歇性而导致的调用堆栈问题,可能是在 Angular 完成摘要或其他内容之前加载 Picturefill 的竞争条件。

提前干杯!

0 投票
1 回答
1525 浏览

javascript - 获取 Safari 上响应式图片的 currentSrc

当我单击带有 photoswipe 插件的图像时,我正在尝试定义一个占位符。我想定义与屏幕上显示的图像完全相同的响应图像版本。

以上是我的图像的不同版本。

我的挑战是显示当前图像。为此,我使用了该currentSrc属性,它在 Firefox 和 Chrome 上运行良好,但在 Safari 上却不行。

我没有找到任何有关 Safari & 的可能解决方案的信息currentSrc

0 投票
1 回答
162 浏览

html - Chrome 中的 srcset 总是在列表中显示第一张图片

我第一次使用 srcset ,它似乎在除 Chrome 之外的所有浏览器中都按预期工作。Chrome 将始终选择 srcset 列表中的第一个图像。我正在使用的代码如下。

所以在这个例子中,Chrome 总是会选择 1800 的图像,但是如果我改变顺序,所以 480 是第一个,这将被选择。有任何想法吗?我的 img 设置有问题吗?

提前致谢

0 投票
1 回答
1794 浏览

html - 为什么 srcset 下载两个图像?

我正在对用于自动化srcsetsizes创建的 grunt 插件进行重大更新,最近对 Chrome 的行为感到困惑(我在桌面上使用 Chrome 版本 46.0.2490.80 m)。我查看了Yoav Weiss 的演示,发现当我将浏览器宽度调整为 400 像素时,Chrome 正在下载两个图像——招聘和移动。

Chrome下载两张图片

演示页面上使用的代码如下所示:

在我的个人博客上也发生了同样的情况,其中 -large 和 -medium 图像都被加载了。

我已经与 Yoav 进行了 Twitter 对话,但他无法重现该场景。那里的其他人可以重现吗?是浏览器的错误吗?我对响应式图像有基本的误解吗?任何建议表示赞赏!

0 投票
1 回答
296 浏览

html - 图片填充在缓存清除时在 IE10 中不起作用

我正在使用 <picture> 元素,并使用 Picturefill 来支持跨浏览器。在 IE10 中(在 9 和 11 中很好),它在普通页面加载时完美运行,但 ctrl+f5 后不显示图像。(如果我随后打开开发工具或更改缩放,以及如果我进行普通刷新,则会加载正确的图像)。

我正在使用 <picture> 如下:

我已经检查了 Picturefill 的演示,甚至在一个与我使用 <picture> 和 srcset 的方式非常接近的示例中,我无法复制此问题,因此它似乎并不是纯粹的 Picturefill 错误。

有没有其他人遇到过这个问题或对如何解决它有任何建议?如果我使用 src 而不是 srcset,它似乎可以工作,但我知道不建议将 src 与 Picturefill 一起使用,因为它会在不支持 srcset 的浏览器中导致双重下载。

0 投票
1 回答
526 浏览

iphone - srcset 在 iPhone 上不起作用

我在我的项目中使用 srcset,一切顺利,直到我在 iPhone 上测试,然后 srcset 突然不起作用,这里是我的代码:

我知道关于像素密度有一些规则,但在 iPhone 上的肖像(320 像素,视网膜 640 像素)加载的图像是 1920 像素,甚至不是 768 像素。

(在 iPhone 5 上测试)

0 投票
0 回答
1880 浏览

javascript - 动态设置图片的 srcset 和 src 属性触发一个请求太多

我将寻求一个延迟加载解决方案,其中<img>'ssrcsrcset属性都是动态设置的。

如果图像的srcsrcset属性都已经存在于 HTML(传统)中,那么支持 srcset 的浏览器将安全地忽略src并仅触发一个从 srcset 列表中挑选的请求。(这家伙说它有效,但是直到最近,从 HTML 触发的两个请求确实是一个Chrome 错误。)

src最初是空的。在 JavaScript 中,srcsrcset属性都设置为属性中的值data-

现在,与已经在 html 中设置属性不同,设置这两个属性会触发两个请求。这适用于首先设置的任何属性。src设置之前的设置srcset已经触发了一个请求,这是可以理解的。

我想要的是设置srcset,然后让支持 srcset 的浏览器找到它的匹配项,同时忽略src之后设置的属性,该属性是其他浏览器的后备。

有没有人有延迟加载 srcset + fallback 的经验?

0 投票
1 回答
33 浏览

html - Galaxy S6 上的 Chrome 45 未根据 srcSet 属性选择正确的 img

当我将浏览器调整为不同的宽度时,我桌面上的 Chrome 46 会加载正确的图像。但是在我的手机上它加载了最大的图像!1024w 一个。当我在手机上访问http://html5test.com/时,它说它支持。谁能确认它在移动设备上无法正常工作?