Question

我在响应式布局中使用jquery延迟加载，并将空白gif作为预览图像。要使延迟加载工作，我必须按属性设置图像的高度和宽度。

预览图像未设置为正确的高度，因为height：auto似乎通过src而不是height-attribute计算高度。我总是得到一个广场。

以下是一个例子：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Test</title>
  <style type="text/css">
    img {
      background-color: #000;
      max-width: 100%;
      height: auto;
    }
  </style>
</head>
<body>
  <img src="blank.gif" width="500" height="300">
</body>
</html>

有什么想法吗？

Answer 1

没有固定的正确高度。如果我在css中设置固定高度，则在响应式布局中，图像将不会以正确的宽高比调整大小。

主要问题是css根据src-attribute设置的图像计算自动高度和宽高比，而不是width-和height-attribute。因此，如果有一个有宽度和高度的真实图像，一切正常。但是如果有一个空白（这只是一个拉伸的1x1图像），宽高比将无法正确计算，因为html设置的宽度和高度对css计算没有影响（但是没有css的浏览器如何显示-calculation）。

我想到的一件事是只为“真实图像”设置“height：auto”，并在每个窗口调整大小时通过jquery计算“空白图像”的高度：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Test</title>
  <style type="text/css">
    img {
      max-width: 100%;
    }
    .lazy-loaded {
      height: auto;
    }
  </style>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
  <script language="JavaScript">
    $(document).ready(function(){
      resizeBlankImages();
    });
    $(window).resize(function(){
      resizeBlankImages();
    });
    function resizeBlankImages() {
      $(".lazy-blank").each(function () {
        var originalWidth = $(this).attr('width');
        var originalHeight = $(this).attr('height');
        var ratio = originalWidth/originalHeight;
        var width = $(this).width();
        var height = width/ratio;
        $(this).height(height);
      });
    }
  </script>
</head>
<body>
  <img data-original="image.jpg" src="image.jpg" class="lazy lazy-loaded" width="500" height="300">
  <br/>
  <img data-original="image.jpg" src="blank.gif" class="lazy lazy-blank" width="500" height="300">
</body>
</html>

它有效，但在包含许多图像的页面上可能会非常麻烦。还有其他想法吗？

Answer 2

正确的身高是多少？如果您正在尝试固定大小为500 x 300px，那么我建议您完全使用CSS。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Test</title>
  <style type="text/css">
    img {
      background-color: #000;
      max-width: 100%;
      width: 300px;
      height: 500px;
    }
  </style>
</head>
<body>
  <img src="blank.gif" alt="preview" />
</body>
</html>

Answer 3

为懒惰图像添加.load事件处理程序。加载时，我们添加.lazy_loaded类

$("img.lazy").lazyload().load(function() {
    var self = $(this);
    if(self.attr('src') == self.data('original')){
        self.addClass('lazy_loaded');
    }
});

然后在你的CSS中，只应用高度：auto;规则到.lazy_loaded

.img.lazy{
    max-width: 100%;
}
img.lazy_loaded{
    height: auto;
}

CSS：响应式布局中的高度自动问题

3 个答案: