问题标签 [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.
php - 如何修改wordpress上的the_post_thumbnail函数?
首先:它甚至可能吗?
我想获得一个返回 srcset<img>
标记的函数,以使我的 wordpress 布局响应。这对我来说很重要,因为我的 wrapper 是 1400 宽,这对于宽于 1400 @1 或 700 @2 的屏幕来说是很好的,但是对于手机来说太宽了,720px 的宽度对于@2 甚至@3 屏幕来说已经足够了(因为它们可以变得更清晰,但眼睛不会注意到太多)。
问题是我不知道在处理 php 时要提供哪种缩略图大小......所以我想使用srcset
. 为此,我知道我必须在functions.php
. 但是我应该怎么做以及怎么做?我应该修改the_post_thumbnail()
功能吗?还是我应该创建一个新的?在这种情况下,如何从不同大小的帖子缩略图中获取不同的图像名称?
css - CSS img srcset 纵向媒体查询
我有两张图片,一张用于横向,一张用于纵向。
使用<picture>
,我可以使用标准媒体查询,但<picture>
Safari 不支持,所以我想使用<img srcset>
. 我找不到任何信息,如何在srcset
.
有什么帮助吗?
angularjs - ng-srcset 图像最初不会间歇性地显示在 IE11 中
页面加载时没有任何图像仅在 IE11 上显示,但是当我们间歇性地调整浏览器大小(1/3 加载)时会相应地刷新它们。我们无法使用任何其他浏览器复制此内容。srcset 本身可以很好地处理静态内容。
或者快速简单,我们正在使用的实际 img html:
图像或周围的 div没有应用任何过渡、阴影或不透明度。
html 可以很好地通过角度传递并正确重写 srcset 属性。图像只是没有出现,只有 alt 标签。想知道这是否可能是由于它的间歇性而导致的调用堆栈问题,可能是在 Angular 完成摘要或其他内容之前加载 Picturefill 的竞争条件。
提前干杯!
javascript - 获取 Safari 上响应式图片的 currentSrc
当我单击带有 photoswipe 插件的图像时,我正在尝试定义一个占位符。我想定义与屏幕上显示的图像完全相同的响应图像版本。
以上是我的图像的不同版本。
我的挑战是显示当前图像。为此,我使用了该currentSrc
属性,它在 Firefox 和 Chrome 上运行良好,但在 Safari 上却不行。
我没有找到任何有关 Safari & 的可能解决方案的信息currentSrc
。
html - Chrome 中的 srcset 总是在列表中显示第一张图片
我第一次使用 srcset ,它似乎在除 Chrome 之外的所有浏览器中都按预期工作。Chrome 将始终选择 srcset 列表中的第一个图像。我正在使用的代码如下。
所以在这个例子中,Chrome 总是会选择 1800 的图像,但是如果我改变顺序,所以 480 是第一个,这将被选择。有任何想法吗?我的 img 设置有问题吗?
提前致谢
html - 为什么 srcset 下载两个图像?
我正在对用于自动化srcset
和sizes
创建的 grunt 插件进行重大更新,最近对 Chrome 的行为感到困惑(我在桌面上使用 Chrome 版本 46.0.2490.80 m)。我查看了Yoav Weiss 的演示,发现当我将浏览器宽度调整为 400 像素时,Chrome 正在下载两个图像——招聘和移动。
演示页面上使用的代码如下所示:
在我的个人博客上也发生了同样的情况,其中 -large 和 -medium 图像都被加载了。
我已经与 Yoav 进行了 Twitter 对话,但他无法重现该场景。那里的其他人可以重现吗?是浏览器的错误吗?我对响应式图像有基本的误解吗?任何建议表示赞赏!
html - 图片填充在缓存清除时在 IE10 中不起作用
我正在使用 <picture> 元素,并使用 Picturefill 来支持跨浏览器。在 IE10 中(在 9 和 11 中很好),它在普通页面加载时完美运行,但 ctrl+f5 后不显示图像。(如果我随后打开开发工具或更改缩放,以及如果我进行普通刷新,则会加载正确的图像)。
我正在使用 <picture> 如下:
我已经检查了 Picturefill 的演示,甚至在一个与我使用 <picture> 和 srcset 的方式非常接近的示例中,我无法复制此问题,因此它似乎并不是纯粹的 Picturefill 错误。
有没有其他人遇到过这个问题或对如何解决它有任何建议?如果我使用 src 而不是 srcset,它似乎可以工作,但我知道不建议将 src 与 Picturefill 一起使用,因为它会在不支持 srcset 的浏览器中导致双重下载。
iphone - srcset 在 iPhone 上不起作用
我在我的项目中使用 srcset,一切顺利,直到我在 iPhone 上测试,然后 srcset 突然不起作用,这里是我的代码:
我知道关于像素密度有一些规则,但在 iPhone 上的肖像(320 像素,视网膜 640 像素)加载的图像是 1920 像素,甚至不是 768 像素。
(在 iPhone 5 上测试)
javascript - 动态设置图片的 srcset 和 src 属性触发一个请求太多
我将寻求一个延迟加载解决方案,其中<img>
'ssrc
和srcset
属性都是动态设置的。
如果图像的src
和srcset
属性都已经存在于 HTML(传统)中,那么支持 srcset 的浏览器将安全地忽略src
并仅触发一个从 srcset 列表中挑选的请求。(这家伙说它有效,但是直到最近,从 HTML 触发的两个请求确实是一个Chrome 错误。)
src
最初是空的。在 JavaScript 中,src
和srcset
属性都设置为属性中的值data-
。
现在,与已经在 html 中设置属性不同,设置这两个属性会触发两个请求。这适用于首先设置的任何属性。src
设置之前的设置srcset
已经触发了一个请求,这是可以理解的。
我想要的是设置srcset
,然后让支持 srcset 的浏览器找到它的匹配项,同时忽略src
之后设置的属性,该属性是其他浏览器的后备。
有没有人有延迟加载 srcset + fallback 的经验?
html - Galaxy S6 上的 Chrome 45 未根据 srcSet 属性选择正确的 img
当我将浏览器调整为不同的宽度时,我桌面上的 Chrome 46 会加载正确的图像。但是在我的手机上它加载了最大的图像!1024w 一个。当我在手机上访问http://html5test.com/时,它说它支持。谁能确认它在移动设备上无法正常工作?