-1

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.

2 Answers 2

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');
    })
})
4
  • Thanks for your answer. I understand the theory but how would you actually express that with code?
    – Marc
    Mar 12, 2015 at 19:56
  • How about the rendered event? It doesn't work for me either: infiniteajaxscroll.com/docs/events.html#rendered
    – Marc
    Mar 12, 2015 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, 2015 at 0:57
  • Thanks for answering. Yes I did, the problem is related to it.
    – Marc
    Mar 19, 2015 at 14:34
0

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.