0

私のページには次々と来る多くの画像が表示されています。ページを実行すると、一度に 4 つまたは 5 つの画像が表示され、下にスクロールすると、次のいくつかの画像が表示されます。特定のdiv内の画像コレクションを繰り返し、このようにjqueryで特定のdiv内の画像に属性を追加します

 $(".diagnostic_picture img").each(function () {
                var img = $(this);
                img.attr("class", "lazy");
                img.attr("data-original", img.attr("src"));
                img.attr("src", "images/grey.gif");
 });

これらの新しい属性を、ページの初回読み込み時に非表示ではない画像に追加したいと考えています。

だから私は画像がビューポートにあるかどうかを検出しようとしています....そうでない場合は、これらの新しい属性を追加します。ここにコードがあります

 $(".diagnostic_picture img").each(function () {
            if ($(this).offset().top > $(window).scrollTop() && $(this).offset().top < $(window).scrollTop() + $(window).height()) {
                var img = $(this);
                img.attr("class", "lazy");
                img.attr("data-original", img.attr("src"));
                img.attr("src", "images/grey.gif");
            }
        });

しかし、それは機能していません....クラス、データオリジナルなどの新しい属性が、不要なすべての画像に追加されています。したがって、私の要件は、誰かが下にスクロールするまで、最初はビューポートにないページの画像に属性を追加することです。私のコードで何を変更する必要がありますか。

私はこの方法で問題を解決しました

$(".diagnostic_picture img").each(function () {
                var img = $(this);
                var pageHeight = $(window).scrollTop() + $(window).height();
                if (img.offset().top > pageHeight) 
                {
                    img.attr("class", "lazy");
                    img.attr("data-original", img.attr("src"));
                    img.attr("src", "images/grey.gif");
                }
 });

このようにして、画像がビューポートにあるかどうかを確認しました

var img = $(this);
var pageHeight = $(window).scrollTop() + $(window).height();
if (img.offset().top > pageHeight) 
{
    // if images are in viewport then i will do something
}

とにかく、私の質問を見てくれてありがとう。

4

1 に答える 1

0

の最初の 4 つの画像のみを表示する場合は、次のdiagnostic_picture方法でそれらのみを選択できます。

$(".diagnostic_picture img:lt(5)")
于 2012-06-18T11:25:17.937 に答える