fix: removal of scroll anchoring code in favour of browser handling

closes #6150

public/js-enabled.css

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

public/less/global.less

@@ -6,21 +6,3 @@
 	==========
 */
 
-/* Prevent viewport shuffling on image load by restricting image dimensions until viewed by the browser */
-.page-topic [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: 0;
-		opacity: 0;
-	}
-
-	&[data-state="loaded"] {
-		display: inherit;
-		height: auto;
-		opacity: 1;
-	}
-}

public/src/client/topic.js

@@ -207,7 +207,7 @@ define('forum/topic', [
 		return index;
 	};
 
-	Topic.navigatorCallback = function (index, elementCount, threshold) {
+	Topic.navigatorCallback = function (index, elementCount) {
 		var path = ajaxify.removeRelativePath(window.location.pathname.slice(1));
 		if (!path.startsWith('topic')) {
 			return;
@@ -217,8 +217,6 @@ define('forum/topic', [
 			return;
 		}
 
-		images.loadImages(threshold);
-
 		var newUrl = 'topic/' + ajaxify.data.slug + (index > 1 ? ('/' + index) : '');
 
 		if (newUrl !== currentUrl) {

public/src/client/topic/diffs.js

@@ -68,8 +68,6 @@ define('forum/topic/diffs', ['forum/topic/images', 'benchpress', 'translator'],
 				posts: [data],
 			}, function (html) {
 				postContainer.empty().append(html);
-				Images.unloadImages(html);
-				Images.loadImages();
 			});
 		});
 	};

public/src/client/topic/events.js

@@ -130,8 +130,6 @@ define('forum/topic/events', [
 			editedPostEl.html(translator.unescape(data.post.content));
 			editedPostEl.find('img:not(.not-responsive)').addClass('img-responsive');
 			images.wrapImagesInLinks(editedPostEl.parent());
-			images.unloadImages(editedPostEl.parent());
-			images.loadImages();
 			editedPostEl.fadeIn(250);
 
 			var editData = {

public/src/client/topic/images.js

@@ -1,104 +1,8 @@
 'use strict';
 
 
-define('forum/topic/images', [
-	'forum/topic/postTools',
-	'navigator',
-	'components',
-], function (postTools, navigator, components) {
-	var Images = {
-		_imageLoaderTimeout: undefined,
-	};
-
-	Images.unloadImages = function (posts) {
-		var images = posts.find('[component="post/content"] img:not(.not-responsive)');
-
-		if (config.delayImageLoading) {
-			images.each(function () {
-				$(this).attr('data-src', $(this).attr('src'));
-			}).attr('data-state', 'unloaded').attr('src', 'about:blank');
-		} else {
-			images.attr('data-state', 'loaded');
-			Images.wrapImagesInLinks(posts);
-			$(window).trigger('action:images.loaded');
-		}
-	};
-
-	Images.loadImages = function (threshold) {
-		if (Images._imageLoaderTimeout) {
-			clearTimeout(Images._imageLoaderTimeout);
-		}
-
-		if (!config.delayImageLoading) {
-			return;
-		}
-
-		Images._imageLoaderTimeout = setTimeout(function () {
-			/*
-				If threshold is defined, images loaded above this threshold will modify
-				the user's scroll position so they are not scrolled away from content
-				they were reading. Images loaded below this threshold will push down content.
-
-				If no threshold is defined, loaded images will push down content, as per
-				default
-			*/
-
-			var images = components.get('post/content').find('img[data-state="unloaded"]');
-			var visible = images.filter(function () {
-				return utils.isElementInViewport(this);
-			});
-			var posts = $.unique(visible.map(function () {
-				return $(this).parents('[component="post"]').get(0);
-			}));
-			var scrollTop = $(window).scrollTop();
-			var adjusting = false;
-			var adjustQueue = [];
-			var oldHeight;
-			var newHeight;
-
-			function adjustPosition() {
-				adjusting = true;
-				oldHeight = document.body.clientHeight;
-
-				// Display the image
-				$(this).attr('data-state', 'loaded');
-				newHeight = document.body.clientHeight;
-
-				var imageRect = this.getBoundingClientRect();
-				if (imageRect.top < threshold) {
-					scrollTop += newHeight - oldHeight;
-					$(window).scrollTop(scrollTop);
-				}
-
-				if (adjustQueue.length) {
-					adjustQueue.pop()();
-				} else {
-					adjusting = false;
-
-					Images.wrapImagesInLinks(posts);
-					$(window).trigger('action:images.loaded');
-					posts.length = 0;
-				}
-			}
-
-			// For each image, reset the source and adjust scrollTop when loaded
-			visible.attr('data-state', 'loading');
-			visible.each(function (index, image) {
-				image = $(image);
-
-				image.on('load', function () {
-					if (!adjusting) {
-						adjustPosition.call(this);
-					} else {
-						adjustQueue.push(adjustPosition.bind(this));
-					}
-				});
-
-				image.attr('src', image.attr('data-src'));
-				image.removeAttr('data-src');
-			});
-		}, 250);
-	};
+define('forum/topic/images', [], function () {
+	var Images = {};
 
 	Images.wrapImagesInLinks = function (posts) {
 		posts.find('[component="post/content"] img:not(.emoji)').each(function () {
@@ -126,6 +30,5 @@ define('forum/topic/images', [
 		});
 	};
 
-
 	return Images;
 });

public/src/client/topic/posts.js

@@ -63,7 +63,6 @@ define('forum/topic/posts', [
 	function onNewPostPagination(data) {
 		function scrollToPost() {
 			scrollToPostIfSelf(data.posts[0]);
-			images.loadImages();
 		}
 
 		var posts = data.posts;
@@ -111,7 +110,6 @@ define('forum/topic/posts', [
 				html.addClass('new');
 			}
 			scrollToPostIfSelf(data.posts[0]);
-			images.loadImages();
 		});
 	}
 
@@ -252,7 +250,6 @@ define('forum/topic/posts', [
 	};
 
 	Posts.onTopicPageLoad = function (posts) {
-		images.unloadImages(posts);
 		Posts.showBottomPostBar();
 		posts.find('[component="post/content"] img:not(.not-responsive)').addClass('img-responsive');
 		addBlockquoteEllipses(posts.find('[component="post/content"] > blockquote > blockquote'));