Question

设置：

我正在使用砖石和无限滚动，我还使用了一个名为jQuery自适应背景的插件，它提取图像的主色并将其应用于图像背景。

jQuery(function($) {
    var $container = $('#container');
    // initialize
    $container.masonry({
        "isFitWidth": true,
        "columnWidth": ".item-post",
        itemSelector: '.block'
    });
    var $container = $('#container');
    $container.infinitescroll({
        navSelector: '#nav-below', // selector for the paged navigation
        nextSelector: '#nav-below a.next', // selector for the NEXT link (to page 2)
        itemSelector: '.block', // selector for all items you'll retrieve
        loading: {
            finishedMsg: "<div class=\"loading\">Fin.</div>",
            img: 'http://passets-ak.pinterest.com/webapp/style/app/common/images/spinner-medium-1x.34fc0f10.gif',
            msgText: "<div class=\"loading\">Loading the next set of posts...</div>",
            speed: 'fast'
    },
    },
            function(newElements) {
                var $newElems = $(newElements).css({
                    opacity: 0
                });
                $newElems.imagesLoaded(function() {
                    $newElems.animate({
                        opacity: 1
                    });
                    $container.masonry('appended', $newElems);
                });
            });
});

使用$ .adaptiveBackground.run（）调用自适应背景;现在我可以坚持内部功能（newElements）;并且每次加载新帖子时都会调用它。问题在于它的效率非常低（明显如此），因为它在每个元素上运行它，甚至是它已经完成的元素。

我的问题是如何运行$ .adaptiveBackground.run（）;只对新添加到#container的元素而不是那些已经存在的元素？

Answer 1

根据the documentation

该脚本使用data-adaptive-background属性查找图像...

所以告诉我你应该这样做：

$.adaptiveBackground.run();
$("img[data-adaptive-background]").removeAttr("data-adaptive-background");

...每次运行它。因此，第一次运行（在页面加载时）将执行标记中存在的那些，然后删除该属性，以便它们不会被重新处理。后续运行（来自您的回调）将只处理新的（然后从中删除属性）。

但文档也表示您可以在传递给run的选项对象中指定自己的选择器：

selector字符串（默认值：'img[data-adaptive-background="1"]'）一个CSS选择器，表示要抓取/处理的图像。理想情况下，此选择器将以img开头，以确保我们只抓取并尝试处理实际图像。

...这意味着您还可以使用标记类标记新图像，告诉adaptiveBackground仅处理这些图像，然后删除标记类。但这是相同的概念。

jquery：在新附加的元素上运行函数

1 个答案: