jquery - 如何延迟加载博客文章以缩小页面大小？

Question

我有一个博客文章列表，数量已达到 25+，但它们都在一个页面中，所以我需要尝试构建一个惰性加载器。

我尝试过各种插件，但都不起作用

http://jsfiddle.net/tara_irvine/S9GGz/6/

JavaScript:

(function($) {

    $.belowthefold = function(element, settings) {
        var fold = $(window).height() + $(window).scrollTop();
        return fold <= $(element).offset().top - settings.threshold;
    };

    $.abovethetop = function(element, settings) {
        var top = $(window).scrollTop();
        return top >= $(element).offset().top + $(element).height() - settings.threshold;
    };

    $.rightofscreen = function(element, settings) {
        var fold = $(window).width() + $(window).scrollLeft();
        return fold <= $(element).offset().left - settings.threshold;
    };

    $.leftofscreen = function(element, settings) {
        var left = $(window).scrollLeft();
        return left >= $(element).offset().left + $(element).width() - settings.threshold;
    };

    $.inviewport = function(element, settings) {
        return !$.rightofscreen(element, settings) && !$.leftofscreen(element, settings) && !$.belowthefold(element, settings) && !$.abovethetop(element, settings);
    };

    $.extend($.expr[':'], {
        "below-the-fold": function(a, i, m) {
            return $.belowthefold(a, {threshold : 0});
        },
        "above-the-top": function(a, i, m) {
            return $.abovethetop(a, {threshold : 0});
        },
        "left-of-screen": function(a, i, m) {
            return $.leftofscreen(a, {threshold : 0});
        },
        "right-of-screen": function(a, i, m) {
            return $.rightofscreen(a, {threshold : 0});
        },
        "in-viewport": function(a, i, m) {
            return $.inviewport(a, {threshold : 0});
        }
    });


})(jQuery);

$(function() {
    var previous = "";
    $(window).bind("scroll", function(event) {

        $(".blog-post:in-viewport").each(function() {
          $(this).addClass("visible");
        });


    });
});

http://jsfiddle.net/tara_irvine/S9GGz/9/

http://jsfiddle.net/tara_irvine/S9GGz/13/

有没有办法检查 div 的顶部值，如果它在 View 中，则添加一个类，以便 div 变得可见(页面加载时 div 被隐藏)？

我看过这些帖子，但在尝试了各种解决方案后，没有一个对我有用。

• How to check if an element is in the view of the user with jquery

• Position of Div in relation to the Top of the Viewport

我哪里出错了？

Answer 1

jQuery Waypoints是一个很好的插件，可以对进入 View 的元素使用react；他们甚至有a lazy-loading example .