如何使用 Infinite AJAX Scroll 预加载每个页面？

Question

我用 Infinite 制作了一个网站 Ajax 滚动：

<script type="text/javascript">
if($(window).width() >= 600){ //activate ias scrolling for windows bigger than 600px

        var ias = $.ias({
            container:  "#base-container",
            item:       ".item",
            pagination: "#pagination",
            next:       ".next a",
            delay:      1500
            });
            ias.extension(new IASSpinnerExtension({ src: 'bundles/spinner.gif' }));
            ias.extension(new IASTriggerExtension({ offset: 100, text: 'Load more' }));
            ias.extension(new IASNoneLeftExtension({text: 'You reached the end.'}));
            ias.extension(new IASPagingExtension());
            ias.extension(new IASHistoryExtension({ prev: '.prev a' }));
        }
   </script>

它工作正常，但我不喜欢它在图像方面呈现新页面的方式，在它们准备好之前就淡入淡出。我的解决方案是通过添加一个简单的预加载器来等待图像。当然，问题是它只触发一次！:

<script type="text/javascript">
        $(window).load(function() { // makes sure the whole site is loaded
            $('#status').fadeOut(); // will first fade out the loading animation
            $('#preloader').delay(350).fadeOut('slow'); // will fade out the white DIV that covers the website.
            $('body').delay(350).css({'overflow':'visible'});
        })
   </script>

我如何才能不预加载一次，而是在每次将新页面附加到正文时预加载？我无法想象解决方案。

Answer 1

您可以绑定到 IAS 的 load/render 事件以在加载下一个内容之前添加延迟。

此外，添加一些随机延迟并不是一个很好的解决方案。您必须对页面中的所有图像使用 onload，然后触发淡出。

还没有测试过，但这应该可以。

ias.on('rendered', function(items) {
    var $items = $(items);
    // The current way
    // $items.hide().delay(350).fadeOut();

    // Better way
    // https://github.com/alexanderdickson/waitForImages
    $items.hide();
    $items.find('img').waitForImages(function(){
         $items.fadeIn('slow');
    })
})

Answer 2

我用 css 和隐藏预加载器 div 的脚本修复了问题，以便用户可以访问图像和标题：

<!-- Preloader: add class, wait and hide div to see sharing buttons and txt edit -->
<script type="text/javascript">
    function imgLoaded(items){ $(function() { $('.preloader').addClass('loaded').delay(1000).hide(100); }); }
</script>

就这么简单。并且：

echo '<img onLoad="imgLoaded(this);" onError= "this.onerror=null;this.src="bundles/blank.svg";" src="'.$imgname.'" alt="Ruben Grilo: '.$title.'" width="'.$widthProportional.'">';

除此之外，它确实有助于处理图像加载的 'cognitive' 方面。由于图像堆叠且具有各种尺寸，我通过计算图像的宽度并在图像开始加载之前将图像放置在占位符中来解决图像加载的外观问题。确保图像具有渐进式压缩也有帮助。

如何使用 Infinite AJAX Scroll 预加载每个页面？

How to preload every page with Infinite AJAX Scroll?

javascript

infinite-scroll

preloader