Javascript 如何使用无限AJAX滚动条预加载每个页面？

我使用无限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>

如果（$（window）.width（）>=600）{//为大于600px的窗口激活ias滚动
var ias=$.ias({
容器：“#基本容器”，
项目：“.item”，
分页：“分页”，
下一个：“.下一个a”，
延误：1500
});
extension（新的IASSpinnerExtension（{src:'bundles/spinner.gif'}））；
extension（新的IASTriggerExtension（{offset:100，text:'loadmore'}））；
extension（新的IASNoneLeftExtension（{text:'youreated the end.'}））；
ias.extension（新的IASPagingExtension（））；
扩展（新的IASHistoryExtension（{prev:'.prev a'}））；
}

它工作得很好，但我不喜欢它在图像上呈现新页面的方式，在它们准备好之前制作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>

$（window）.load（function（）{//确保加载了整个站点
$（“#status”）.fadeOut（）；//将首先淡出加载动画
$（'#preload'）.delay（350）.fadeOut（'slow'）；//将淡出覆盖网站的白色DIV。
$（'body'）.delay（350）.css（{'overflow'：'visible'}）；
})

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

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

另外，增加一些随机延迟也不是一个很好的解决方案。您必须对页面中的所有图像使用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');
    })
})

---

我修复了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>

函数imgLoaded（items）{$（函数（）{$（'.preload'））.addClass（'loaded'）.delay（1000）.hide（100）；}）；}

那很简单。以及：

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

echo'；

---

除此之外，它确实有助于图像加载的“认知”方面的工作。由于图像堆叠且大小不同，我通过计算图像的宽度并在图像开始加载之前将图像放置在占位符中来解决图像加载的外观问题。确保图像具有渐进压缩也有帮助。

谢谢您的回答。我理解这个理论，但是你如何用代码来表达呢？渲染事件呢？这对我也不管用：谢谢！它可以很好地处理捕捉到的图像，但在其他情况下似乎不起作用。为什么会这样？谢谢你的回答。是的，我做了，问题与此有关。