How to preload every page with Infinite AJAX Scroll?

Question

I made a website using 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>

It works fine but I don't like the way it renders new pages when it comes to images, making the fadein before they are ready. My solution is waiting for the images by adding a simple preloader. The problem is, of course, that it fires only once!:

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

How can I preload not once, but every time a new page is appended to the body? I can't picture the solution.

Abhilash S Hebbar · Answer 1 · 2015-03-13T10:34:17.260

1

You can bind to the load/render event of IAS to add a delay before the next content is loaded.

Also, adding some random delay is not a great solution. You must use the onload for all images in your page and then trigger fadeout.

Have'nt tested it yet, but this should work.

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');
    })
})

edited Mar 13 '15 at 10:34

answered Mar 12 '15 at 06:25

Abhilash S Hebbar

76
3

Thanks for your answer. I understand the theory but how would you actually express that with code? – Marc Mar 12 '15 at 19:56
How about the rendered event? It doesn't work for me either: http://infiniteajaxscroll.com/docs/events.html#rendered – Marc Mar 12 '15 at 22:54
Thanks! It works well with catched images, but it's doesn't seem to work otherwise. Why would that be? – Marc Mar 18 '15 at 00:57
Thanks for answering. Yes I did, the problem is related to it. – Marc Mar 19 '15 at 14:34

Marc · Accepted Answer · 2015-03-27T20:44:22.180

I fixed the problem with css and a script that hides the preloader div, so that the image and the caption are reachable by the user:

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

That simple. And:

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

In addition to that, it really helped working on the 'cognitive' aspects of the images loading. As the images where stacked and had various sizes, I solved the look of the images loading by calculating the width of the image and placing the images in placeholders before the images start loading. Making sure the images have progressive compression also helped.

How to preload every page with Infinite AJAX Scroll?

2 Answers2