Question

我出于某种原因无法延迟加载图片。以下是测试网站的waterfall view

显然我正在使用两个带有lazy load script 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>

您可以在上面的代码中找到钟乳石脚本的链接，这里是documentation。我不知道为什么它不起作用！或者我是错误地执行它。解决问题的方法非常有用。非常感谢提前。

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 demo image。

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

无法延迟加载图片

1 个答案: