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) {
+[component="post/content"] img {
-	height: 1rem;
-	opacity: 0;
 	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,7 +24,8 @@ app.cacheBuster = null;
 	});
 
 	app.load = function() {
-		$('document').ready(function () {
+		app.loadProgressiveStylesheet();
+
 		var url = ajaxify.start(window.location.pathname.slice(1) + window.location.search + window.location.hash, true);
 		ajaxify.end(url, app.template);
 
@@ -83,7 +84,6 @@ app.cacheBuster = null;
 
 			$(window).trigger('action:app.load');
 		});
-		});
 	};
 
 	app.logout = function() {
@@ -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