5

我在响应式布局中使用 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>

有什么想法吗？

4

3 回答 3

3

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

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

我想到的一件事是仅为“真实图像”设置“高度：自动”，并在每次调整窗口大小时通过 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>

它可以工作，但在包含许多图像的页面上可能会变得非常麻烦。有人对此有其他想法吗？

于 2012-09-14T08:19:02.750 回答
0

将 .load 事件处理程序添加到您的惰性图像。当它们加载时，我们添加 .lazy_loaded 类

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

然后在你的CSS中，只应用高度：自动；.lazy_loaded 规则

.img.lazy{
    max-width: 100%;
}
img.lazy_loaded{
    height: auto;
}
于 2014-07-18T04:16:53.953 回答
0

正确的高度是多少？如果您尝试使用 500 x 300 像素的固定大小，那么我建议您完全从 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>
于 2012-09-13T18:15:55.100 回答