0

次のように、多くの画像を含む HTML ページがあり、すべて独自の div にあり、各 div は同じサイズです。

HTML:

<div class="maindiv">
    <div class="mboxclass">
        <p>image1</p>
        <img class="imgclass" src="transparant.gif" data-original="actual1.jpg">
    </div>

    <div class="mboxclass">
        <p>image2</p>
        <img class="imgclass" src="transparant.gif" data-original="actual2.jpg">
    </div>

    <div class="mboxclass">
        <p>image3</p>
        <img class="imgclass" src="transparant.gif" data-original="actual3.jpg">
    </div>

    ...

</div>

jQuery の Lazy Load Plugin を使用して、スクロールするときに画像を読み込むことにしました。

遅延ロードの実装:

$("img.imgclass").lazyload();

Lazy Load とは何かを知らない方のために: Lazy Load

livesearch 機能を実装するまで、これはすべてうまくいきました。これは、フォームに入力された単語、フレーズの div を検索し、検索入力に一致しない div を非表示にします。

HTMLフォーム:

<form id="live-search" action="" class="styled" method="post">
    <fieldset>
        <input type="text" class="text-input" id="filter" value="" />
        <span id="filter-count"></span>
    </fieldset>
</form>

JS:

$(document).ready(function(){
    $("#filter").keyup(function(){

        // Retrieve the input field text and reset the count to zero
        var filter = $(this).val(), count = 0;

        // Loop through the comment list
        $(".maindiv div").each(function(){

            // If the list item does not contain the text phrase fade it out
            if ($(this).text().search(new RegExp(filter, "i")) < 0) {
                $(this).hide();

            // Show the list item if the phrase matches and increase the count by 1
            } else {
                $(this).show();
                count++;
            }
        });

        // Update the count
        var numberItems = count;
        $("#filter-count").text("Number of Comments = "+count);
    });
});

ソース

検索はうまく機能し、適切な div を非表示にして表示するのが非常に高速ですが、問題は、検索結果で、事前にスクロールされた画像のみが適切に表示されることです。他のdivにはまだ「transparant.gif」が表示されていました

検索結果の画像の「src」を「データ元の」画像に更新するにはどうすればよいですか?

4

3 に答える 3

1

さて、lazyload 関数はスクロール イベントによってトリガーされる$(window).trigger("scroll")ため、コードに a を追加することでうまくいきました。

これを直後に追加した$("#filter-count").text("Number of Comments = "+count); ので、検索が完了するたびにスクロールトリガーが作成され、現在フレーム内にある画像が遅延ロードされました。

于 2013-10-09T18:49:14.847 に答える
1

以下のように、数秒後に遅延ロード関数をトリガーします

    $(document).ready(function(){
        $("#filter").keyup(function(){

            // Retrieve the input field text and reset the count to zero
            var filter = $(this).val(), count = 0;

            // Loop through the comment list
            $(".maindiv div").each(function(){

                // If the list item does not contain the text phrase fade it out
                if ($(this).text().search(new RegExp(filter, "i")) < 0) {
                    $(this).hide();

                // Show the list item if the phrase matches and increase the count by 1
                } else {
                    $(this).show();
                    count++;
                }
            });

            // Update the count
            var numberItems = count;
            $("#filter-count").text("Number of Comments = "+count);
            window.setTimeout(show_images, 5000 ); // 5 seconds
    });
    function show_images(){
        $("img.lazy").lazyload().trigger("appear");
    }
});
于 2014-07-24T13:59:21.607 に答える
1

DIV が更新されるたびに、lazyload を実行/更新する必要があります。

編集：

lazyload がスクロール時に実行されるようです$(window).trigger('scroll');。keyup

于 2013-10-09T18:28:04.113 に答える