无法延迟加载图像

Question

好吧，由于某种原因，我无法延迟加载图像。 这是测试地点的瀑布视图

显然，我正在使用两个带有惰性加载脚本1的惰性加载脚本 ，该脚本可以运行，但会杀死灯箱插件，并且还需要使用data-src和src以及class =“ lazy-load”属性进行大量调整。 我用于非帖子相关图片。

但是主要问题在于第二个脚本，它需要Jquery但不需要对图像进行任何调整。 该脚本称为stalactite （通过Github），我这样使用

<script charset='utf-8' src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js' type='text/javascript' />
<script href='http://googledrive.com/host/0B2xMFcMT-eLiV1owdlBMeklGc2M' type='text/javascript' />
<script type='text/javascript'>
    $( &#39;body&#39;).stalactite({
        loader: &#39;<img/>&#39; // The contents of the loader. Defaults to a dataURL animated gif.
    });
</script>

您可以在上面的代码中找到钟乳石脚本的链接，这是文档 。 我不知道为什么它不起作用！ 还是我执行错误。 解决该问题将非常有帮助。 提前谢谢了。

Answer 1

如果您厌倦了尝试使用延迟加载库而又没有设法使它们全部正常工作，我建议您自己创建延迟加载脚本，也可以在下面查看此代码。

通过仅使用jQuery而不需要任何其他库，您可以使用此脚本来实现延迟加载（我从工作中使用的原始代码修改了代码）：

var doLazyLoad = true;
var lazyLoadCounter = 0;
var lazyLoadMax = 2;    // Maximum number of lazy load done

// Button to indicate lazy load is loading, 
// or when lazy load has reached its maximum number, 
// this button load data manually.
// You can replace this with something like gif loading animation.
var $btnLoadMore = $("#btn-lazy-load-more");

// I use AJAX function to get the data on lazy load
var ajaxFn = function (enableScrollAnim = true) {
    var loadingStr = 'Loading...',
        idleStr = 'Load more',
        ajaxUrl = 'http://www.example.com/posts',
        ajaxHeaders = {'HTTP_X_REQUESTED_WITH': 'XMLHttpRequest'},
        ajaxData = {
            start: $('.posts-wrapper .post').length
        };

    $btnLoadMore.text(loadingStr);  // You can disable the button to prevent manual loading

    return $.ajax({
        url: ajaxUrl,
        type: 'GET',
        dataType: 'json',
        data: ajaxData,
        headers: ajaxHeaders,

        // On success AJAX, append newly loaded data to lazy load container.
        // Here in my example, the GET request returns data.view i.e. the content, and data.total i.e. total number of posts
        success: function (data) {
            var $newLoadedPosts = $(data.view),
                nlsMarginBottom;

            $('.posts-wrapper').append($newLoadedPosts);
            $newLoadedPosts.css('display', 'none').fadeIn();

            // Animate auto scroll to newly loaded content
            if (enableScrollAnim) {
                $('html, body').animate({
                    scrollTop: $newLoadedPosts.first().offset().top
                });
            }

            if ($('.posts-wrapper .post').length < data.total) {
                $btnLoadMore.text(idleStr);  // If you disable the button, enable the button again here
            } else {
                // Remove the button when there's no more content to load.
                // Determined by data.total
                $btnLoadMore.remove(); 
            }
        },
        error: function () {
            $btnLoadMore.text(idleStr);  // If you disable the button, enable the button again here
        }
    });
};

// Do the lazy load here
if ($btnLoadMore.length) {
    $(window).scroll(function () {
        var scrollOffset = (($btnLoadMore.offset().top - $(window).height()) + $btnLoadMore.height()) + 100;
        var hasReachedOffset = $(window).scrollTop() >= scrollOffset;
        var isLmsBtnExist = $btnLoadMore.length;

        if (hasReachedOffset && lazyLoadCounter < lazyLoadMax && doLazyLoad && isLmsBtnExist) {
            doLazyLoad = false;

            ajaxFn(false).always(function () {
                doLazyLoad = true;
                lazyLoadCounter++;
            });
        }
    });
}

$btnLoadMore.click(ajaxFn);

这是我的工作代码的GIF演示图像 。

如果您需要任何进一步的解释，只需评论此答案，我会尽力帮助您。