Uploaded image for project: 'Inline Media'
  1. Inline Media
  2. INLINEMEDIA-46

Add lazy loading while listing videos of the playlist

XMLWordPrintable

    • Icon: Improvement Improvement
    • Resolution: Unresolved
    • Icon: Major Major
    • 2.LATER
    • 1.7.0
    • None
    • 1 - Middle term
    • 2 - Normal

      • Add jQuery plugin Waypoints (4.0 or more) : https://github.com/imakewebthings/waypoints
      • Add call to this plugin in common-service-head-js of youtubegallery_1.4.xsl:
        <script type="text/javascript" src="{ametys:pluginResourceURL('inlinemedia', 'js/jquery.waypoints.min.js')}"/>
      • And add a div for lazy loading after playlist_{$uniqueId} <ul>:
        <div id="playlist_{$uniqueId}_lazyload" style="text-align:center;"><img width="50" height="50" src="{ametys:pluginResourceURL('inlinemedia', 'img/loading.gif')}"/></div>
      • Modify addVideos javascript function (playlist.js) by replacing :
        if (data.nextPageToken)
        {
        	addVideos (uniqueId, playlistId, apiKey, data.nextPageToken);
        }

        by:

        if (data.nextPageToken)
        {
        	$j('#playlist_' + playlistUniqueId + '_lazyload').show();
        	new Waypoint({
        		element: document.getElementById('playlist_' + playlistUniqueId + '_lazyload'),
        		handler: function(direction)
        		{
        			if (direction == 'down')
        			{
        				addVideos(uniqueId, playlistId, apiKey, data.nextPageToken);
        				this.destroy();
        			}
        		},
        		offset: 'bottom-in-view'
        	});
        }
        else
        {
        	$j('#playlist_' + playlistUniqueId + '_lazyload').hide();
        }

        1. loading.gif
          loading.gif
          15 kB
        2. INLINEMEDIA-46.patch
          11 kB
        3. Chrome.png
          Chrome.png
          178 kB

            Unassigned Unassigned
            bmaurel Bérénice Maurel
            Votes:
            0 Vote for this issue
            Watchers:
            3 Start watching this issue

              Created:
              Updated: