在响应框中制作响应图像而不会导致页面速度出现可见内容问题
Posted
技术标签:
【中文标题】在响应框中制作响应图像而不会导致页面速度出现可见内容问题【英文标题】：Making responsive image in responsive box without causing visible content issue in pagespeed 【发布时间】：2016-09-04 21:19:41 【问题描述】：我的基本目标是在其中加载一个带有图像（由 javascript 准备）的黑匣子。我希望图像和框都能响应（在所有分辨率下正确缩放），但我希望图像的最大宽度为一定大小。到目前为止，这是我的代码：
<html>
<head>
<style>
#mybox
background: #000;
padding: 10px;
#picturesettings
max-width: 365px;
width: 100%;
height: auto;
</style>
</head>
<body>
<div id="mybox">
<div id="mypicture">
</div>
</div>
<script>
var mypicture=document.getElementById('mypicture');
var newpicture=document.createElement('IMG');
newpicture.id="picturesettings";
newpicture.;
newpicture.src="/path/to/image.jpg";
mypicture.appendChild(newpicture);
</script>
</body>
</html>
我的目标是成功的，只是图片在其他所有内容加载后加载，这将触发谷歌页面速度洞察中的“优先考虑可见内容”问题，因为一旦加载图片，外框将需要调整大小。
有没有一种方法可以加载图片，使外框的初始尺寸只需要完成一次而不是两次？
如果您想查看其中的“优先考虑可见内容问题”，请查看此 URL。
https://developers.google.com/speed/pagespeed/insights/?url=http%3A%2F%2Fnew.clubcatcher.com%2Fm%2Fpictures%2Fstudio-entertainment-theatre%2F2016may06%2F1
这是我的网站，其中框的大小取决于图像的大小。
我觉得我唯一的解决方案是将黑盒高度设置为最大高度，这样无论照片大小如何，照片都能很好地放入其中，但该实施的问题是屏幕宽度非常小的设备上的用户会看到图片大小合适，但他们会看到一堆黑色空间，他们必须滚动浏览才能找到文本，这也是我不想要的。
有什么办法可以解决这个问题吗？
【问题讨论】：
您可以通过在 SVG 中插入图像来轻松实现此目的，使 SVG 标记100% 的 width 和 height - 及其 viewbox 属性为分辨率（实际大小) 你的形象。这将在不使用 JavaScript 的情况下按比例缩放。如果您对这种技术感兴趣，我可以在回复评论时发布答案。
【参考方案1】：
为什么不给 DIV 一个高度并将图像设置为 BG，这样它下面就没有空白了，我想像 #mybox 有一个边框：10px solid #000;然后将图像作为#mybox 的背景并给它一个背景尺寸：封面；如果它看起来不好，你也可以使用媒体查询来修改盒子的高度以获取其他屏幕尺寸。
【讨论】：
我不确定 CSS3 功能是否适用于旧手机。虽然针对不同盒子高度的媒体查询是一个想法，但恐怕我需要数百万行来适应每个高度。 我正在适应固定高度，其中高度取决于媒体查询。如果智能手机不支持媒体查询，请有人投诉。以上是关于在响应框中制作响应图像而不会导致页面速度出现可见内容问题的主要内容，如果未能解决你的问题，请参考以下文章