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

Question

我使用的是无限ajax-滚动插件以及一个倒计时插件、一个悬停字幕插件和Metro (http://www.drewgreenwell.com/projects/metrojs)。

JQuery效果在第一个页面上工作得很好，但是它们没有应用到通过无限滚动插件加载的页面。

我知道我需要在Infinite初始化中使用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

演示

我也试过

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

而且效果很好。