1

私はページにたくさんの画像を持っていますが、このサイトの目的のために、クライアントは画像がゆっくりと表示され、行ごとにレンダリングされる通常の方法で画像が読み込まれないことを望んでいます。

むしろ、私たちが探しているのは、画像が読み込まれるまで待ち、画像が読み込まれている間、その場所に小さな読み込みgifを表示することです。各画像が読み込まれると、フェードインします。

これまで私がこれまでに行ったことはこれです：

$('img').each(function(){

    $(this).load(function(){

        $(this).fadeIn();

    });    

});

期待どおりに動作します。しかし、私はそれを次のレベルに持っていきたいです。

このページには20枚の画像がありますが、一度に1つか2つしか表示されないとします。次に、ブラウザが下にスクロールしてこれらが表示されない限り、他の18個の読み込みに煩わされないようにします。

これを行うためのプラグイン（lazyloadなど）があることは理解していますが、これらのプラグインでは良い結果が得られていません。

jqueryまたはjavascriptを使用して、画像が現在のビューポートにあるかどうかを確認するにはどうすればよいですか？

  1. 私のeach（）関数は、最初は表示されている画像のみをループします
  2. 画像が表示されると、画像が読み込まれ、フェードインします。

御時間ありがとうございます。

4

2 に答える 2

2

InViewのようなプラグインを試すことができます。

ただし、おそらくイベントをimgのコンテナにアタッチし、コンテナが「表示」されたときにのみ画像をロードする必要があります。

編集

プラグインを使用して画像を「遅延読み込み」する方法の例を次に示します。

// Assuming that all images have set the 'data-src' attribute
// instead of the 'src' attribute
$("img[data-src]").live("inview", function() {

    // Load the image
    $(this).attr("src", $(this).attr("data-src"));

    // Remove it from the set of matching elements in order to avoid
    // the handler from re-executing
    $(this).removeAttr("data-src");

});

注:はおよびlive()に置き換えられています。おそらく、代わりにこれらのいずれかを使用する必要があります。on()delegate()

于 2012-11-21T07:23:13.253 に答える
-2

このようなことをする

<div id='loder'><img src="loder.gif"></div>

<div id='images' style="display:none;">
<img src='image1.jpg'>
<img src='image2.jpg'>
<img src='image3.jpg'>
<img src='image4.jpg'>
<img src='image5.jpg'>
</div>

次に、ドキュメントの準備ができたら、loder divを非表示にし、画像divを表示します。

$(function(){
$("#loder").hide();
$("#images").show();
});
于 2012-11-21T07:09:48.240 に答える