Fixing regression from 3e2231d2cb

@BenLubar

package.json

@@ -47,7 +47,7 @@
     "nodebb-plugin-composer-default": "3.0.18",
     "nodebb-plugin-dbsearch": "1.0.1",
     "nodebb-plugin-emoji-extended": "1.0.3",
-    "nodebb-plugin-markdown": "5.0.0",
+    "nodebb-plugin-markdown": "5.0.1",
     "nodebb-plugin-mentions": "1.0.21",
     "nodebb-plugin-soundpack-default": "0.1.6",
     "nodebb-plugin-spam-be-gone": "0.4.6",

public/js-enabled.css

@@ -0,0 +1,7 @@
+/*
+    The following stylesheet is only included on pages that can execute javascript
+*/
+
+[component="post/content"] img:not(.not-responsive):not([data-state]) {
+	display: none !important;
+}

public/less/global.less

@@ -7,14 +7,19 @@
 */
 
 /* Prevent viewport shuffling on image load by restricting image dimensions until viewed by the browser */
-[component="post/content"] img:not(.not-responsive) {
-	height: 1rem;
-	opacity: 0;
+[component="post/content"] img {
 	transition: width 500ms ease;
 	transition: height 500ms ease;
 	transition: opacity 500ms ease;
 
+	&[data-state="unloaded"], &[data-state="loading"] {
+		display: inherit;
+		height: 1rem;
+		opacity: 0;
+	}
+
 	&[data-state="loaded"] {
+		display: inherit;
 		height: auto;
 		opacity: 1;
 	}

public/src/app.js

@@ -24,65 +24,65 @@ app.cacheBuster = null;
 	});
 
 	app.load = function() {
-		$('document').ready(function () {
-			var url = ajaxify.start(window.location.pathname.slice(1) + window.location.search + window.location.hash, true);
-			ajaxify.end(url, app.template);
+		app.loadProgressiveStylesheet();
 
-			handleStatusChange();
+		var url = ajaxify.start(window.location.pathname.slice(1) + window.location.search + window.location.hash, true);
+		ajaxify.end(url, app.template);
 
-			if (config.searchEnabled) {
-				app.handleSearch();
-			}
+		handleStatusChange();
 
-			$('#content').on('click', '#new_topic', function(){
-				app.newTopic();
-			});
+		if (config.searchEnabled) {
+			app.handleSearch();
+		}
 
-			require(['components'], function(components) {
-				components.get('user/logout').on('click', app.logout);
-			});
+		$('#content').on('click', '#new_topic', function(){
+			app.newTopic();
+		});
 
-			Visibility.change(function(e, state){
-				if (state === 'visible') {
-					app.isFocused = true;
-					app.alternatingTitle('');
-				} else if (state === 'hidden') {
-					app.isFocused = false;
-				}
-			});
+		require(['components'], function(components) {
+			components.get('user/logout').on('click', app.logout);
+		});
 
-			overrides.overrideBootbox();
-			overrides.overrideTimeago();
-			createHeaderTooltips();
-			app.showEmailConfirmWarning();
-
-			socket.removeAllListeners('event:nodebb.ready');
-			socket.on('event:nodebb.ready', function(data) {
-				if (!app.cacheBusters || app.cacheBusters['cache-buster'] !== data['cache-buster']) {
-					app.cacheBusters = data;
-
-					app.alert({
-						alert_id: 'forum_updated',
-						title: '[[global:updated.title]]',
-						message: '[[global:updated.message]]',
-						clickfn: function() {
-							window.location.reload();
-						},
-						type: 'warning'
-					});
-				}
-			});
+		Visibility.change(function(e, state){
+			if (state === 'visible') {
+				app.isFocused = true;
+				app.alternatingTitle('');
+			} else if (state === 'hidden') {
+				app.isFocused = false;
+			}
+		});
 
-			require(['taskbar', 'helpers', 'forum/pagination'], function(taskbar, helpers, pagination) {
-				taskbar.init();
+		overrides.overrideBootbox();
+		overrides.overrideTimeago();
+		createHeaderTooltips();
+		app.showEmailConfirmWarning();
 
-				// templates.js helpers
-				helpers.register();
+		socket.removeAllListeners('event:nodebb.ready');
+		socket.on('event:nodebb.ready', function(data) {
+			if (!app.cacheBusters || app.cacheBusters['cache-buster'] !== data['cache-buster']) {
+				app.cacheBusters = data;
 
-				pagination.init();
+				app.alert({
+					alert_id: 'forum_updated',
+					title: '[[global:updated.title]]',
+					message: '[[global:updated.message]]',
+					clickfn: function() {
+						window.location.reload();
+					},
+					type: 'warning'
+				});
+			}
+		});
 
-				$(window).trigger('action:app.load');
-			});
+		require(['taskbar', 'helpers', 'forum/pagination'], function(taskbar, helpers, pagination) {
+			taskbar.init();
+
+			// templates.js helpers
+			helpers.register();
+
+			pagination.init();
+
+			$(window).trigger('action:app.load');
 		});
 	};
 
@@ -539,4 +539,12 @@ app.cacheBuster = null;
 			}
 		});
 	};
+
+	app.loadProgressiveStylesheet = function() {
+		var linkEl = document.createElement('link');
+		linkEl.rel = 'stylesheet';
+		linkEl.href = config.relative_path + '/js-enabled.css';
+
+		document.head.appendChild(linkEl);
+	}
 }());

public/src/client/topic/posts.js

@@ -218,6 +218,7 @@ define('forum/topic/posts', [
 	};
 
 	Posts.processPage = function(posts) {
+		Posts.unloadImages();
 		Posts.showBottomPostBar();
 		posts.find('[component="post/content"] img:not(.not-responsive)').addClass('img-responsive');
 		app.createUserTooltips(posts);
@@ -231,6 +232,15 @@ define('forum/topic/posts', [
 		hidePostToolsForDeletedPosts(posts);
 	};
 
+	Posts.unloadImages = function() {
+		var images = components.get('post/content').find('img:not(.not-responsive)');
+		images.each(function() {
+			$(this).attr('data-src', $(this).attr('src'));
+			$(this).attr('data-state', 'unloaded');
+			$(this).attr('src', 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7');
+		});
+	};
+
 	Posts.loadImages = function(threshold) {
 		/*
 			If threshold is defined, images loaded above this threshold will modify