Javascript jQuery Lazyload实时搜索后的图像

我有一个HTML页面，有很多图像，都在它们自己的div中，每个div都有相同的大小，如下所示：

HTML:

对于那些不知道什么是惰性负载的人：

这一切都很好，直到我实现了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:

$（文档）.ready（函数（）{
$（“#过滤器”）.keyup（函数（）{
//检索输入字段文本并将计数重置为零
var filter=$（this）.val（），count=0；
//循环浏览注释列表
$（“.maindiv”）。每个（函数（）{
//如果列表项不包含文本短语，请将其淡出
if（$（this.text（）.search）（新的RegExp（filter，“i”））<0）{
$（this.hide（）；
//如果短语匹配，则显示列表项并将计数增加1
}否则{
$（this.show（）；
计数++；
}
});
//更新计数
var numberItems=计数；
$（“#过滤器计数”）.text（“注释数=”+count）；
});
});

搜索效果很好，它隐藏和显示正确的div非常快，但问题是，在搜索结果中，只适当地显示了之前已经滚动到的图像。其他div仍显示“transparant.gif”

---

如何将搜索结果中图像的“src”更新为其“原始数据”图像？

每次更新div时，您都必须运行/更新lazyload

编辑：

---

lazyload似乎在滚动上运行，请尝试添加

$（window.trigger（'scroll'）

在每次

键控时

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

编辑：

---

lazyload似乎在滚动上运行，请尝试添加

$（window.trigger（'scroll'）

在每次

键控时

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

编辑：

---

lazyload似乎在滚动上运行，请尝试添加

$（window.trigger（'scroll'）

在每次

键控时

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

编辑：

---

lazyload似乎在滚动上运行，请尝试添加

$（window.trigger（'scroll'）在每个
键上
好的，因为lazyload函数是由一个滚动事件触发的，所以添加了一个
$（窗口）。触发器（“滚动”）
到代码中就成功了

我在
$（“#过滤器计数”）之后添加了这个
因此，每次搜索完成时，都会执行一个滚动触发器，lazyload会加载当前帧中的图像。
好的，因为lazyload函数是由滚动事件触发的，所以会添加一个
$（窗口）。触发器（“滚动”）
到代码中就完成了这一操作

我在
$（“#过滤器计数”）之后添加了这个
因此，每次搜索完成时，都会执行一个滚动触发器，lazyload会加载当前帧中的图像。
好的，因为lazyload函数是由滚动事件触发的，所以会添加一个
$（窗口）。触发器（“滚动”）
到代码中就完成了这一操作

我在
$（“#过滤器计数”）之后添加了这个
因此，每次搜索完成时，都会执行一个滚动触发器，lazyload会加载当前帧中的图像。
好的，因为lazyload函数是由滚动事件触发的，所以会添加一个
$（窗口）。触发器（“滚动”）
到代码中就完成了这一操作

我在
$（“#过滤器计数”）之后添加了这个
因此，每次搜索完成时，都会进行滚动触发，lazyload会加载当前帧中的图像。
几秒钟后触发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");
    }
});

$（文档）.ready（函数（）{
$（“#过滤器”）.keyup（函数（）{
//检索输入字段文本并将计数重置为零
var filter=$（this）.val（），count=0；
//循环浏览注释列表
$（“.maindiv”）。每个（函数（）{
//如果列表项不包含文本短语，请将其淡出
if（$（this.text（）.search）（新的RegExp（filter，“i”））<0）{
$（this.hide（）；
//如果短语匹配，则显示列表项并将计数增加1
}否则{
$（this.show（）；
计数++；
}
});
//更新计数
var numberItems=计数；
$（“#过滤器计数”）.text（“注释数=”+count）；
setTimeout（显示图像，5000）；//5秒
});
函数show_images（）{
$（“img.lazy”）.lazyload（）.trigger（“出现”）；
}
});
几秒钟后触发懒散加载功能，如下所示

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

$（文档）.ready（函数（）{
$（“#过滤器”）.keyup（函数（）{
//检索输入字段文本并将计数重置为零
var filter=$（this）.val（），count=0；
//循环浏览注释列表
$（“.maindiv”）。每个（函数（）{
//如果列表项不包含文本短语，请将其淡出
if（$（this.text（）.search）（新的RegExp（filter，“i”））<0）{
$（this.hide（）；
//如果短语匹配，则显示列表项并将计数增加1
}否则{
$（this.show（）；
计数++；
}
});
//更新计数
var numberItems=计数；
$（“#过滤器计数”）.text（“注释数=”+count）；
setTimeout（显示图像，5000）；//5秒
$(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);
    });
});

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