1

http://www.appelsiini.net/projects/lazyloadこのプラグインを使用して画像を読み込みました。

ページの画像が読み込まれているときに下にスクロールすると正常に動作しますが、ページが読み込まれたときに最初の行の画像を表示する必要があります。

これどうやってするの？

4

3 に答える 3

2

デフォルトでは、画像は画面に表示されるときに読み込まれます。画像を早くロードしたい場合は、しきい値パラメータを設定できます。しきい値を 200 に設定すると、画像が表示される前に 200 ピクセルが読み込まれます。

$("img.lazy").lazyload({ threshold : 200 });

あなたの場合、最初の行はページのどのくらい下にありますか?

$(function() {
    var $firstRow = $('table:first tr:first'), 
    threshold = $firstRow.offset().top + $firstRow.height();
    $("img.lazy").lazyload({ threshold : threshold });
});

またはそのようなもの。

于 2012-09-24T06:04:20.643 に答える
0

実行中の Web サイトのデモ ページでは、最初の行にページが読み込まれて表示されます。このDEMOを参照してください。

$(function() {
          $("img").lazyload({
              effect : "fadeIn",
              /*
              appear : function(elements_left, settings) {
                  console.log("appear");
                  console.log(elements_left);
                  //console.log(this, elements_left, settings);
              },
              load : function(elements_left, settings) {
                  console.log("load");
                  console.log(elements_left);
                  //console.log(this, elements_left, settings);
              }
              */
          });
      });​
于 2012-09-24T06:05:01.557 に答える
0

画像に幅と高さの属性がありません。それらがないと、遅延ロードは正しく機能しません。幅と高さがわからないと、ブラウザは、document.readyイベントが発生したときにレイアウト内のどこに画像があるべきかを知ることができません。適切なイメージ タグは次のようになります。

<img class="lazy" src="img/grey.gif" data-original="img/example.jpg"  width="640" heigh="480">
于 2013-01-27T21:27:17.253 に答える