Question

我使用Infinite Ajax Scrolling建立了一个网站：

<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>

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

<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.'">';

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

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

2 个答案: