jQuery 在实时搜索后延迟加载图像

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>

我决定使用 jQuery 的延迟加载插件在滚动到图像时加载图像。

延迟加载实现：

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

对于那些不知道什么是延迟加载的人：延迟加载

这一切都很好，直到我实现了实时搜索功能。这会在div 中搜索在表单中键入的单词(短语(，并隐藏与搜索输入不匹配的div。

表格：

<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仍然显示"透明.gif">

我该怎么做才能将搜索结果中图像的"src"更新为"数据原始"图像？

Answer 1

每次

更新 DIV 时，您都必须运行/更新延迟加载。

编辑：

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

Answer 2

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

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

Answer 3

在一秒钟后触发延迟加载函数，如下所示

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