Question

我有一个包含大量图片的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>

我决定使用Lazy Load Plugin for jQuery在我滚动它们时加载图像。

懒惰的负荷实施：

$("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);
    });
});

Source

搜索效果很好，它隐藏并显示正确的div非常快，但问题是在搜索结果中，只有预先滚动到的图像被正确显示。其他div仍然显示“transparant.gif”

如何更新搜索结果中图像的“src”以获取“数据原始”图像？

Answer 1

每次更新DIV时都必须运行/更新lazyload。

编辑：

lazyload似乎在滚动时运行，尝试在每个$(window).trigger('scroll');上添加keyup

Answer 2

好的，由于lazyload函数是由滚动事件触发的，因此在代码中添加$(window).trigger("scroll")就可以了。

我在$("#filter-count").text("Number of Comments = "+count);之后立即添加了此内容这样每次搜索完成时，都会生成一个滚动触发器，并且lazyload会加载当前帧中的图像。

Answer 3

触发lazyload函数一秒后如下

    $(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");
    }
});

实时搜索后jQuery Lazyload图像

3 个答案: