PrimeFaces Extensions Showcase

Waypoint
Infinite scrolling with change of image sources in JavaScript. The Waypoint component self is used in combination with pe:javascript. In the callback function we get the current waypoint object (image).
Show infinite scrolling
Source
XHTML page

<h1>Flickr search results for lolcats</h1>

<img alt="image" src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="
     data-src="http://farm2.static.flickr.com/1395/530815732_591e117af0_m.jpg" width="240" height="180"/>
<img alt="image" src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="
     data-src="http://farm2.static.flickr.com/1006/533314156_5a8f3aae47_m.jpg" width="205" height="240"/>
<img alt="image" src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="
     data-src="http://farm1.static.flickr.com/202/517143876_262ef0223c_m.jpg" width="240" height="192"/>
<img alt="image" src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="
     data-src="http://farm3.static.flickr.com/2414/1800544122_cc4f9c1b86_m.jpg" width="208" height="240"/>
<img alt="image" src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="
     data-src="http://farm3.static.flickr.com/2130/2534664596_59887ab28c_m.jpg" width="177" height="240"/>
<img alt="image" src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="
     data-src="http://farm2.static.flickr.com/1342/743809708_6432c78fee_m.jpg" width="223" height="240"/>
<img alt="image" src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="
     data-src="http://farm2.static.flickr.com/1064/771724890_f8fc22a89a_m.jpg" width="240" height="216"/>
<img alt="image" src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="
     data-src="http://farm3.static.flickr.com/2307/1516071079_682ad620c4_m.jpg" width="180" height="240"/>
<img alt="image" src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="
     data-src="http://farm4.static.flickr.com/3119/2699841820_a7ec988c10_m.jpg" width="240" height="133"/>
<img alt="image" src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="
     data-src="http://farm2.static.flickr.com/1084/650361412_e6acdf5607_m.jpg" width="240" height="180"/>
<img alt="image" src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="
     data-src="http://farm1.static.flickr.com/196/491476118_4f8095b946_m.jpg" width="240" height="193"/>
<img alt="image" src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="
     data-src="http://farm2.static.flickr.com/1438/533362045_875d36bb5e_m.jpg" width="240" height="192"/>
<img alt="image" src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="
     data-src="http://farm1.static.flickr.com/209/499409303_bfe28ec063_m.jpg" width="240" height="180"/>
<img alt="image" src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="
     data-src="http://farm4.static.flickr.com/3195/2698016803_0f92be091f_m.jpg" width="240" height="178"/>
<img alt="image" src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="
     data-src="http://farm1.static.flickr.com/219/456826183_a37d5a1e73_m.jpg" width="180" height="240"/>
<img alt="image" src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="
     data-src="http://farm3.static.flickr.com/2016/1544134756_8f41c08a2e_m.jpg" width="240" height="180"/>
<img alt="image" src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="
     data-src="http://farm4.static.flickr.com/3291/2541619169_30dc45d902_m.jpg" width="240" height="161"/>
<img alt="image" src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="
     data-src="http://farm2.static.flickr.com/1247/1057586225_c6fc44b7a0_m.jpg" width="66" height="240"/>
<img alt="image" src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="
     data-src="http://farm3.static.flickr.com/2403/1590736702_99cdaff655_m.jpg" width="240" height="180"/>
<img alt="image" src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="
     data-src="http://farm2.static.flickr.com/1046/529503777_60bc65633c_m.jpg" width="240" height="240"/>
<img alt="image" src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="
     data-src="http://farm2.static.flickr.com/1074/528715033_3a6809df8b_m.jpg" width="240" height="180"/>
<img alt="image" src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="
     data-src="http://farm3.static.flickr.com/2386/2514987207_5eac7e98af_m.jpg" width="144" height="240"/>
<img alt="image" src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="
     data-src="http://farm1.static.flickr.com/238/517166948_5c1caac82f_m.jpg" width="240" height="192"/>
<img alt="image" src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="
     data-src="http://farm2.static.flickr.com/1132/549310317_b4b74910a4_m.jpg" width="240" height="180"/>
<img alt="image" src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="
     data-src="http://farm1.static.flickr.com/230/484654574_f25e01962a_m.jpg" width="240" height="180"/>
<img alt="image" src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="
     data-src="http://farm2.static.flickr.com/1115/703042270_bb5662cf57_m.jpg" width="240" height="192"/>
<img alt="image" src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="
     data-src="http://farm1.static.flickr.com/223/513554360_11ccb2b58d_m.jpg" width="240" height="180"/>
<img alt="image" src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="
     data-src="http://farm4.static.flickr.com/3289/3019815380_74081c467d_m.jpg" width="240" height="180"/>
<img alt="image" src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="
     data-src="http://farm1.static.flickr.com/167/494015278_2a010d8689_m.jpg" width="240" height="180"/>
<img alt="image" src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="
     data-src="http://farm4.static.flickr.com/3124/2479092042_2f412133b6_m.jpg" width="199" height="240"/>
<img alt="image" src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="
     data-src="http://farm3.static.flickr.com/2676/4135411790_eb1cd29a44_m.jpg" width="240" height="189"/>
<img alt="image" src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="
     data-src="http://farm2.static.flickr.com/1052/525165323_9917220b13_m.jpg" width="240" height="180"/>
<img alt="image" src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="
     data-src="http://farm2.static.flickr.com/1413/541521527_267b7197e8_m.jpg" width="240" height="136"/>
<img alt="image" src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="
     data-src="http://farm1.static.flickr.com/223/476230230_05606ebd7a_m.jpg" width="240" height="180"/>
<img alt="image" src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="
     data-src="http://farm1.static.flickr.com/184/497710545_351b0d53de_m.jpg" width="240" height="181"/>
<img alt="image" src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="
     data-src="http://farm2.static.flickr.com/1142/863528833_9e06871d9c_m.jpg" width="240" height="180"/>
<img alt="image" src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="
     data-src="http://farm3.static.flickr.com/2264/2805230477_d791b064db_m.jpg" width="240" height="180"/>
<img alt="image" src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="
     data-src="http://farm2.static.flickr.com/1087/528722885_6448cdf9df_m.jpg" width="240" height="180"/>
<img alt="image" src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="
     data-src="http://farm3.staticflickr.com/2166/2237130234_8a51578093_m.jpg" width="240" height="240"/>
<img alt="image" src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="
     data-src="http://farm1.static.flickr.com/218/506494645_da93753bd4_m.jpg" width="240" height="103"/>
<img alt="image" src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="
     data-src="http://farm2.static.flickr.com/1212/1399164139_9919c0cafc_m.jpg" width="240" height="167"/>
<img alt="image" src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="
     data-src="http://farm2.static.flickr.com/1357/772708512_4d5356939f_m.jpg" width="240" height="136"/>
<img alt="image" src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="
     data-src="http://farm1.static.flickr.com/206/520716722_5ba70b2eab_m.jpg" width="180" height="240"/>
<img alt="image" src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="
     data-src="http://farm3.staticflickr.com/2366/2237130178_2b21263612_m.jpg" width="220" height="240"/>
<img alt="image" src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="
     data-src="http://farm3.staticflickr.com/2062/2236339819_a75f24fbbb_m.jpg" width="240" height="226"/>
<img alt="image" src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="
     data-src="http://farm1.static.flickr.com/230/491252713_9ff762b4c9_m.jpg" width="240" height="160"/>
<img alt="image" src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="
     data-src="http://farm4.static.flickr.com/3152/2543943607_74915845f2_m.jpg" width="168" height="240"/>
<img alt="image" src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="
     data-src="http://farm3.staticflickr.com/2407/2237131720_c09d82f036_m.jpg" width="218" height="240"/>
<img alt="image" src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="
     data-src="http://farm1.static.flickr.com/211/491252717_8b64f5cb65_m.jpg" width="240" height="195"/>
<img alt="image" src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="
     data-src="http://farm2.static.flickr.com/1052/1337430349_12d5e43749_m.jpg" width="181" height="240"/>
<img alt="image" src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="
     data-src="http://farm1.static.flickr.com/224/491252705_279d00d931_m.jpg" width="240" height="160"/>
<img alt="image" src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="
     data-src="http://farm2.static.flickr.com/1019/532727518_9757868b18_m.jpg" width="240" height="180"/>
<img alt="image" src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="
     data-src="http://farm2.static.flickr.com/1175/1230424000_0f918092c5_m.jpg" width="240" height="180"/>
<img alt="image" src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="
     data-src="http://farm1.static.flickr.com/171/491252707_0b2a3a0788_m.jpg" width="240" height="160"/>
<img alt="image" src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="
     data-src="http://farm3.staticflickr.com/2260/2153445669_025fce5512_m.jpg" width="180" height="240"/>
<img alt="image" src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="
     data-src="http://farm2.staticflickr.com/1074/528715033_3a6809df8b_m.jpg" width="240" height="218"/>
<img alt="image" src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="
     data-src="http://farm3.staticflickr.com/2018/2237132312_ca686fcfa2_m.jpg" width="240" height="234"/>
<img alt="image" src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="
     data-src="http://farm4.static.flickr.com/3295/3151627503_b7e9f2b6ca_m.jpg" width="240" height="180"/>
<img alt="image" src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="
     data-src="http://farm2.static.flickr.com/1275/644620280_25f2c0ca61_m.jpg" width="240" height="180"/>
<img alt="image" src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="
     data-src="http://farm4.static.flickr.com/3133/3145677692_79763f61a5_m.jpg" width="240" height="180"/>

<pe:waypoint id="waypoint" for="@(img[data-src])" offset="'100%'">
    <pe:javascript event="reached" execute="handleWaypoint(ext);"/>
</pe:waypoint>

<h:outputScript id="waypointScript" target="body">
/* <![CDATA[ */
    function handleWaypoint(ext) {
        var img = $(ext.waypoint);
        
        // show a smooth animation
        img.css('opacity', 0);
        
        // change src
        img.attr('src', img.attr('data-src'));
        
        // note: call .load() on cached images is not reliable.
        // better to use https://github.com/desandro/imagesloaded
        img.on("load", function(){
            img.animate({ opacity: 1 }, 500);

            // remove data-src
            img.removeAttr('data-src');
            
            // destroy waypoint
            img.waypoint('destroy');
        });
    }
/* ]]> */
</h:outputScript>

<h:outputStylesheet id="waypointCSS">
    img {
        border: 0;
        padding: 1px;
        margin: 40px;
    }
</h:outputStylesheet>