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 的延迟加载插件在滚动到图像时加载图像。

延迟加载实现：

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

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

这一切都很好，直到我实现了一个实时搜索功能。这会在 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

几秒钟后触发延迟加载功能，如下所示

    $(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

好的，因为延迟加载函数是由滚动事件触发的，所以$(window).trigger("scroll")在代码中添加 a 就可以了。

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

于 2013-10-09T18:49:14.847 回答
1

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

编辑：

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

于 2013-10-09T18:28:04.113 回答