Html 具有声明的宽度和高度的图像在加载前呈现方形

我有声明宽度和高度的图像，例如：

<img src="foo.jpg" width="1500" height="1800" alt="bar" />

它们位于响应网格内，因此它们以

最大宽度：100%

显示。他们懒洋洋的。问题是，尽管有

height:auto，图像在加载前始终显示为方形，这会在加载完成后造成页面高度跳转

因此，上面的图像示例，在我的960px宽度网格中，将在960px x 960px处显示一个占位符，直到加载完整图像，此时它将是960px x Y（其中Y是正确的高度）

我的问题是如何让占位符图像模拟实际图像的最终加载尺寸？
这里我为您制作了一个

主要的事情是在它周围生成一个div，并根据加载后应该是什么设置高度和宽度。然后，您可以将其加载到该容器中，甚至可以实现平滑效果；）

HTML

JAVASCRIPT

$(document).ready(function() {
    $('.lazyload').each(function() {
        var parentwidth = $(this).parent().width();
        var width  = $(this).attr('data-width');    
        var height = $(this).attr('data-height');

        if(parentwidth < width) {
            height = (parentwidth/width*height);
            width = parentwidth;
        }

        $(this).css({ width: width+'px', height: height+'px'});

    });

    // simulating lazyload
    setTimeout(function() {
        $('.lazyload').each(function() {
            img = $('<img>', { 'class': 'lazyloaded' }).css({display: 'none'});
            original = $(this);
            $(img).load( function(){
                original.append(img);
                $(this).fadeIn(200);
            }).attr('src', $(this).attr('data-src'));
        });
    }, 5000);
});

$（文档）.ready（函数（）{
$（'.lazyload'）。每个（函数（）{
var parentwidth=$（this.parent（）.width（）；
var-width=$（this.attr（'data-width'）；
var height=$（this.attr（'data-height'）；
if（parentwidth让我知道这是否是您需要的，以便我可以根据您的需要进行更改。
您可以使用以下解决方案达到所需的效果

HTML:

<img src="blank.gif" class="lazy" data-src="foo.png" width="1500" height="1800" alt="bar">  
             ▲                ▲  
             ║                ╚═══ The class will be used for the lazy loader below  
             ║  
             ╚═══ Use faulty gif here to hide it from showing before loaded

来源：
可以找到Lazyload脚本。
我一开始就注意到，您使用px而不是%表示宽度和高度。响应性HTML 5 DOCType。您应该使用百分比。有很多手机和平板电脑访问您的网站

在标题中使用元标记视口。尝试以下操作

 <meta name="viewport" content="initial-scale=1, maximum-scale=1">



有关如何为任何设备正确调整网页大小的更多信息，请访问此处

我确信你使用CSS控制图像的高度和宽度，如果可能的话，尽量远离属性。在CSS代码中，宽度和高度部分使用最小值和最大值。你不需要JavaScript来解决你的问题。
能否请你在CSS中为图像添加所需的最大高度。我认为这是你可以解决你的问题。
在写这篇文章时，没有一个答案可以解释为什么会发生这种情况或如何克服它。我发现这与解释一个有趣的“黑客”来解决这个问题的答案相同。
以下是唯一一个100%有效的解决方案，而且更简单：

简而言之，您可以使用包含维度的SVG占位符图像：

<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3 2'%3E%3C/svg%3E" data-src="//picsum.photos/900/600" alt="Lazy loading test image" />



下面是一个示例：

const placeholderSrc = (width, height) => `data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${width} ${height}"%3E%3C/svg%3E`

const lazyImage = ({url, width, height, alt}) => {
  return (
    <img
      src={placeholderSrc(width, height)}
      data-src={url}
      alt={alt} />
  )
}

constplaceholder src=（宽度、高度）=>`data:image/svg+xml，%3Csvg xmlns=”http://www.w3.org/2000/svg“viewBox=“0 0${width}${height}”%3E%3C/svg%3E`
const lazyImage=（{url，width，height，alt}）=>{
返回(
)
}
你能告诉代码你的图像是如何加载的吗？首先，你有一个错误：
宽度
和
高度
属性不采用CSS单位。要么只将值更改为整数，要么使用样式属性。其次，你是说你的CSS中有
高度：自动
，但
高度=（值）
在HTML中？千万不要这样做。@MrLister很好地抓住了宽度/高度px的问题。Re:
height:auto
在CSS中，如果没有它，图像会延伸到其声明的高度。这是问题的一部分，因为相反，如果我不在
img
中声明
高度，我肯定无法避免页面高度加载图像时跳转？可能是图像上的最小高度这是一个延迟加载库，与所问问题无关。它确实扩展了一点，但它指的是为img使用一个虚拟src，这将解决屏幕上显示占位符矩形的问题。但是我们将占位符以正确的纵横比显示在屏幕上，仅此而已。那么，您希望占位符的外观是什么？如果您只想要单一颜色的矩形，您可以始终使用1x1px图像作为
blank.gif
。它将加载得非常快，并将很好地拉伸到您的比例，并用您选择的颜色填充它e、 这就是你想要的吗？@bloudermilk:我已经用这些信息更新了我的答案，如果它对你有效，你可以选择它作为接受。如果不适用，我们可以从其他角度进行处理。这并不能回答问题。将
max height
设置为什么？在没有JavaScript的情况下有什么方法可以这样做吗？问题不是关于延迟加载。问题是sp特别是在加载图像之前，要求保持图像布局比例。只需添加
width=“”
和
height=“”
 <meta name="viewport" content="initial-scale=1, maximum-scale=1">

<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3 2'%3E%3C/svg%3E" data-src="//picsum.photos/900/600" alt="Lazy loading test image" />

const placeholderSrc = (width, height) => `data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${width} ${height}"%3E%3C/svg%3E`

const lazyImage = ({url, width, height, alt}) => {
  return (
    <img
      src={placeholderSrc(width, height)}
      data-src={url}
      alt={alt} />
  )
}