Forum

Thread tagged as: Question, Problem

lazy loading flexslider images

Hi, I have some fairly large slideshow images (max 4-5) that are being loaded into Flexslider. To improve performance / page load speed, I would like initially to load a single image and then asynchronously load the rest once the page has loaded.

At present the images are added using a perch repeater - Is there any way to output just the first item from the repeater and then output the rest using an asynchronously loaded php file (using jquery getscript)?

Would this be better achieved using multiple item regions? like so...

    perch_content_custom('Slideshow', array(
        'template'=>'slides.html',
        'sort'=>'date',
        'sort-order'=>'ASC',
        'count'=>1
    ));

And if so, how would I call up the rest of the images from the right page using a separate asynchronously loaded php script?

parent page js:

$.get("slides.php?page=<?php echo $page_name; ?>", function(data) {
        $('.flexslider li').append(data);
        // do more jquery stuff
});

I'm at a loss as to how to get the content from the right page in slides.php:

include($_SERVER['DOCUMENT_ROOT'].'/perch/runtime.php');
$page  = $_GET['page'];
    perch_content_custom('News', array(
        'page'=>'/'.$page.'/index.php',
        'template'=>'ajax_slide.html',
        'sort'=>'date',
        'sort-order'=>'ASC',
        'start'=>2
    ));

Any suggestions as to how to get this to work would be greatly appreciated - thanks!
Adam Green

Adam Green 0 points

  • 7 years ago
Drew McLellan

Drew McLellan 2638 points
Perch Support

7 years ago

You can't paginate a repeater as such, but you can do it with a couple of templates

<perch:repeater ... >
    <perch:if exists="perch_item_first">
        ... template tags here for showing first item
    <perch:else />
    </perch:if>
</perch:repeater>

<perch:repeater ... >
    <perch:if exists="perch_item_first">
    <perch:else />
        ... template tags here for showing all but the first item
    </perch:if>
</perch:repeater>
Adam Green

Adam Green 0 points

7 years ago

Thanks for the suggestion Drew, this looks very useful indeed!... though I'm not sure how I'm going to be able to use multiple templates as the second batch of files need to be loaded asynchronously from another script.

Ideally the main (first) template dictates where the images are added in the admin, so outputting the first of these using the above template code is fine.

What parameters would I need to pass to the second (async) script and how would I call the second template? Using perch_content-custom?
Drew McLellan

Drew McLellan 2638 points
Perch Support

7 years ago

Yes, use perch_content_custom() for your ajax end point and specify the second template.
Adam Green

Adam Green 0 points

7 years ago

Hi Drew, I'm not getting any output with the following in my ajax end point. Am I missing something?

    include($_SERVER['DOCUMENT_ROOT'].'/perch/runtime.php');
    perch_content_custom('Slideshow', array(
        'page'=>'page'=>'/test/index.php',
        'template'=>'slides_rest.html'
    ));

'Slideshow' is the region in /test/index.php assigned to slides_first.html template (this works):

<perch:repeater id="slides" label="Slides" max="5">
        <perch:before><ul class="slides"></perch:before>
            <perch:if exists="perch_item_first"><li><img src="<perch:content id="image" type="image" label="Slide image" width="1340" height="670" crop="true" />" alt="<perch:content id="alt" type="text" label="Slide description" />" /></li>
        <perch:else />
        </perch:if>
       <perch:after></ul></perch:after>
</perch:repeater>

This is slides_rest.html template called by perch_content_custom():

<perch:repeater id="slides" label="Slides" max="5">
    <perch:if exists="perch_item_first">
    <perch:else />
        <li><img src="<perch:content id="image" type="image" label="Slide image" width="1340" height="670" crop="true" />" alt="<perch:content id="alt" type="text" label="Slide description" />" /></li>
    </perch:if>
</perch:repeater>
Drew McLellan

Drew McLellan 2638 points
Perch Support

7 years ago

This line is nonsense:

'page'=>'page'=>'/test/index.php',

should be:

'page'=>'/test/index.php',
Adam Green

Adam Green 0 points

7 years ago

What a numpty! Sorry about that and thanks again for all your help. All working now.