javascript - 无限滚动 - 将 jquery 效果应用于所有滚动页面上的元素

Question

我正在使用 infinite-ajax-scroll plugin连同 countdown plugin和一个 hover Caption plugin和 Metro JS(http://www.drewgreenwell.com/projects/metrojs)。

JQuery 效果在第一页上运行良好，但不适用于通过无限滚动插件加载的页面。

我知道我需要在 Infinite Scroll 初始化中使用 onLoadItems 或 onRenderComplete，但是，我对 JQuery 语法不是很好，希望能得到任何帮助这个工作。

//code for countdown applied to every element
echo "<script type=\"text/javascript\">
    $(window).load(function(){
        $('#countdown_$id').countdown({until: new Date($year, $month - 1, $day, $hour, $minute, $secs)});
    });
</script>";
echo '<div class="defaultCountdown" id="countdown_'.$id.'"></div>';

//code that applied hover captions and infinite scroll
$(document).ready(function () {
    $('.hcaption').hcaptions({
        effect: "fade"
    });
    //animate tiles
    $(".live-tile").liveTile({pauseOnHover: true});

    // Infinite Ajax Scroll configuration
    jQuery.ias({
        container: '#main', // main container where data goes to append
        item: '.element', // single items
        pagination: '.paginate', // page navigation
        next: '.paginate a', // next page selector
        loader: '<img src="public/img/ajax-loader.gif"/>', // loading gif
        loaderDelay: 200,
        thresholdMargin: -600,
        noneleft: 'No more discounts', //Contains the message to be displayed when there are no more pages left to load
        triggerPageThreshold: '10', // show "load more" if scroll more than this to stop
        trigger: "",
        onLoadItems: function (newElements) {
            // hide new items while they are loading
            var $newElems = $(newElements).css({
                opacity: 0
            });
            // ensure that images load before adding to isotope layout
            $newElems.imagesLoaded(function () {
                // show elems now they're ready
                $newElems.animate({
                    opacity: 1
                });
                $container.isotope('insert', $newElems, true);
            });
            return true;
        }
    });
    //end infinite
});

Answer 1

初始化滚动时，您需要使用onLoadItems 和 onRenderComplete:

jQuery.ias({
    container: '#main', // main container where data goes to append
    item: '.element', // single items
    pagination: '.paginate', // page navigation
    next: '.paginate a', // next page selector
    loader: '<img src="public/img/ajax-loader.gif"/>', // loading gif
    loaderDelay: 200,
    thresholdMargin: -600,
    noneleft: 'No more discounts'
    triggerPageThreshold: '10',
    trigger: "",
    onLoadItems: function (newElements) {
        // hide new items while they are loading
        var $newElems = $(newElements).css({
            opacity: 0
        });
        // ensure that images load before adding to isotope layout
        $newElems.imagesLoaded(function () {
            // show elems now they're ready
            $newElems.animate({
                opacity: 1
            });
            $container.isotope('insert', $newElems, true);
        });
        setTimeout("$('.hcaption').hcaptions({effect: 'fade'})",1000);
        setTimeout('$(".live-tile, .flip-list").not(".exclude").liveTile()',1000);
        return true;
    }
});
//end infinite

DEMO

我也试过

onRenderComplete: function(items) {
    $('.hcaption').hcaptions({effect: "fade"});
    $(".live-tile, .flip-list").not(".exclude").liveTile();
}

而且效果很好。