5

プレビュー画像として空白のgifを使用して、レスポンシブレイアウトでjquery遅延ロードを使用します。遅延読み込みを機能させるには、属性によって画像の高さと幅を設定する必要があります。

height:auto は高さ属性ではなく src によって高さを計算しているように見えるため、プレビュー画像は正しい高さに設定されていません。私はいつも正方形を取得します。

次に例を示します。

<!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 が wi​​dth- および height- 属性ではなく src-attribute によって設定された画像から自動の高さと縦横比を計算することです。したがって、幅と高さを持つ実際の画像があれば、すべて正常に機能します。ただし、空白がある場合 (これは引き伸ばされた 1x1 画像にすぎません)、html によって設定された幅と高さは css 計算に影響しないため、アスペクト比は正しく計算されません (ただし、css なしでブラウザーによってどのように表示されるか)。 -計算）。

私が考えたことの1つは、「実際の画像」に対してのみ「高さ：自動」を設定し、ウィンドウのサイズ変更ごとに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

正しい身長は？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>
于 2012-09-13T18:15:55.100 に答える
0

遅延イメージに .load イベント ハンドラーを追加します。それらがロードされると、.lazy_loaded クラスを追加します

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

次に、CSS で、height: auto; のみを適用します。.lazy_loaded へのルール

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