[ticket/13882] Lazy load the notification avatars.

This moves them further down the waterfall, making the page load
quicker.

PHPBB3-13882

phpBB/assets/javascript/core.js

@@ -1612,6 +1612,18 @@ phpbb.registerPageDropdowns = function() {
 	});
 };
 
+phpbb.lazyLoadAvatars = function loadAvatars() {
+	$('.avatar[data-src]').each(function () {
+		var $avatar = $(this);
+
+		$avatar
+			.attr('src', $avatar.data('src'))
+			.removeAttr('data-src');
+	});
+};
+
+$(window).load(phpbb.lazyLoadAvatars);
+
 /**
 * Apply code editor to all textarea elements with data-bbcode attribute
 */

phpBB/includes/functions.php

@@ -4809,10 +4809,11 @@ function phpbb_get_group_avatar($user_row, $alt = 'GROUP_AVATAR', $ignore_config
 * @param array $row Row cleaned by \phpbb\avatar\manager::clean_row
 * @param string $alt Optional language string for alt tag within image, can be a language key or text
 * @param bool $ignore_config Ignores the config-setting, to be still able to view the avatar in the UCP
+* @param bool $lazy If true, will be lazy loaded (requires JS)
 *
 * @return string Avatar html
 */
-function phpbb_get_avatar($row, $alt, $ignore_config = false)
+function phpbb_get_avatar($row, $alt, $ignore_config = false, $lazy = false)
 {
 	global $user, $config, $cache, $phpbb_root_path, $phpEx;
 	global $request;
@@ -4850,7 +4851,25 @@ function phpbb_get_avatar($row, $alt, $ignore_config = false)
 
 	if (!empty($avatar_data['src']))
 	{
-		$html = '<img src="' . $avatar_data['src'] . '" ' .
+		if ($lazy) {
+			// Determine board url - we may need it later
+			$board_url = generate_board_url() . '/';
+			// This path is sent with the base template paths in the assign_vars()
+			// call below. We need to correct it in case we are accessing from a
+			// controller because the web paths will be incorrect otherwise.
+			$phpbb_path_helper = $phpbb_container->get('path_helper');
+			$corrected_path = $phpbb_path_helper->get_web_root_path();
+
+			$web_path = (defined('PHPBB_USE_BOARD_URL_PATH') && PHPBB_USE_BOARD_URL_PATH) ? $board_url : $corrected_path;
+
+			$theme = "{$web_path}styles/" . rawurlencode($user->style['style_path']) . '/theme';
+
+			$src = 'src="' . $theme . '/images/no_avatar.gif" data-src="' . $avatar_data['src'] . '"';
+		} else {
+			$src = 'src="' . $avatar_data['src'] . '"';
+		}
+
+		$html = '<img class="avatar" ' . $src .
 			($avatar_data['width'] ? ('width="' . $avatar_data['width'] . '" ') : '') .
 			($avatar_data['height'] ? ('height="' . $avatar_data['height'] . '" ') : '') .
 			'alt="' . ((!empty($user->lang[$alt])) ? $user->lang[$alt] : $alt) . '" />';

phpBB/includes/functions_compatibility.php

@@ -30,10 +30,11 @@ if (!defined('IN_PHPBB'))
 * @param string $avatar_height Height of users avatar
 * @param string $alt Optional language string for alt tag within image, can be a language key or text
 * @param bool $ignore_config Ignores the config-setting, to be still able to view the avatar in the UCP
+* @param bool $lazy If true, will be lazy loaded (requires JS)
 *
 * @return string Avatar image
 */
-function get_user_avatar($avatar, $avatar_type, $avatar_width, $avatar_height, $alt = 'USER_AVATAR', $ignore_config = false)
+function get_user_avatar($avatar, $avatar_type, $avatar_width, $avatar_height, $alt = 'USER_AVATAR', $ignore_config = false, $lazy = false)
 {
 	// map arguments to new function phpbb_get_avatar()
 	$row = array(
@@ -43,7 +44,7 @@ function get_user_avatar($avatar, $avatar_type, $avatar_width, $avatar_height, $
 		'avatar_height'	=> $avatar_height,
 	);
 
-	return phpbb_get_avatar($row, $alt, $ignore_config);
+	return phpbb_get_avatar($row, $alt, $ignore_config, $lazy);
 }
 
 /**

phpBB/phpbb/notification/type/admin_activate_user.php

@@ -104,7 +104,7 @@ class admin_activate_user extends \phpbb\notification\type\base
 	*/
 	public function get_avatar()
 	{
-		return $this->user_loader->get_avatar($this->item_id);
+		return $this->user_loader->get_avatar($this->item_id, false, true);
 	}
 
 	/**

phpBB/phpbb/notification/type/group_request.php

@@ -96,7 +96,7 @@ class group_request extends \phpbb\notification\type\base
 	*/
 	public function get_avatar()
 	{
-		return $this->user_loader->get_avatar($this->item_id);
+		return $this->user_loader->get_avatar($this->item_id, false, true);
 	}
 
 	/**

phpBB/phpbb/notification/type/pm.php

@@ -100,7 +100,7 @@ class pm extends \phpbb\notification\type\base
 	*/
 	public function get_avatar()
 	{
-		return $this->user_loader->get_avatar($this->get_data('from_user_id'));
+		return $this->user_loader->get_avatar($this->get_data('from_user_id'), false, true);
 	}
 
 	/**

phpBB/phpbb/notification/type/post.php

@@ -165,7 +165,7 @@ class post extends \phpbb\notification\type\base
 	*/
 	public function get_avatar()
 	{
-		return $this->user_loader->get_avatar($this->get_data('poster_id'));
+		return $this->user_loader->get_avatar($this->get_data('poster_id'), false, true);
 	}
 
 	/**

phpBB/phpbb/notification/type/report_pm.php

@@ -223,7 +223,7 @@ class report_pm extends \phpbb\notification\type\pm
 	*/
 	public function get_avatar()
 	{
-		return $this->user_loader->get_avatar($this->get_data('reporter_id'));
+		return $this->user_loader->get_avatar($this->get_data('reporter_id'), false, true);
 	}
 
 	/**

phpBB/phpbb/notification/type/report_pm_closed.php

@@ -130,7 +130,7 @@ class report_pm_closed extends \phpbb\notification\type\pm
 	*/
 	public function get_avatar()
 	{
-		return $this->user_loader->get_avatar($this->get_data('closer_id'));
+		return $this->user_loader->get_avatar($this->get_data('closer_id'), false, true);
 	}
 
 	/**

phpBB/phpbb/notification/type/report_post.php

@@ -196,7 +196,7 @@ class report_post extends \phpbb\notification\type\post_in_queue
 	*/
 	public function get_avatar()
 	{
-		return $this->user_loader->get_avatar($this->get_data('reporter_id'));
+		return $this->user_loader->get_avatar($this->get_data('reporter_id'), false, true);
 	}
 
 	/**

phpBB/phpbb/notification/type/report_post_closed.php

@@ -137,7 +137,7 @@ class report_post_closed extends \phpbb\notification\type\post
 	*/
 	public function get_avatar()
 	{
-		return $this->user_loader->get_avatar($this->get_data('closer_id'));
+		return $this->user_loader->get_avatar($this->get_data('closer_id'), false, true);
 	}
 
 	/**

phpBB/phpbb/notification/type/topic.php

@@ -119,7 +119,7 @@ class topic extends \phpbb\notification\type\base
 	*/
 	public function get_avatar()
 	{
-		return $this->user_loader->get_avatar($this->get_data('poster_id'));
+		return $this->user_loader->get_avatar($this->get_data('poster_id'), false, true);
 	}
 
 	/**

phpBB/phpbb/user_loader.php

@@ -179,9 +179,10 @@ class user_loader
 	* @param bool $query Should we query the database if this user has not yet been loaded?
 	* 						Typically this should be left as false and you should make sure
 	* 						you load users ahead of time with load_users()
+	* @param bool @lazy If true, will be lazy loaded (requires JS)
 	* @return string
 	*/
-	public function get_avatar($user_id, $query = false)
+	public function get_avatar($user_id, $query = false, $lazy = false)
 	{
 		if (!($user = $this->get_user($user_id, $query)))
 		{
@@ -193,7 +194,7 @@ class user_loader
 			include($this->phpbb_root_path . 'includes/functions_display.' . $this->php_ext);
 		}
 
-		return get_user_avatar($user['user_avatar'], $user['user_avatar_type'], $user['user_avatar_width'], $user['user_avatar_height']);
+		return get_user_avatar($user['user_avatar'], $user['user_avatar_type'], $user['user_avatar_width'], $user['user_avatar_height'], 'USER_AVATAR', false, $lazy);
 	}
 
 	/**