image jellypotato
-
If you're like me, it probably pisses you off when you're scrolling through and - even though you're in paged view - images load delayed and inevitably cause jellypotato. So I got tired of it, and decided to just load them.
I even went into infiniscroll mode (just to make sure it didn't do any Very Bad Things)... discovered that there's a lot of jellypotato when scrolling up, but turned off the script and refreshed and there was still about the same amount of jellypotato when scrolling up. So I don't think my script was causing any.
Anyway, without further ado...
function loadImages() { var i = document.querySelectorAll('img[data-state="unloaded"]'); if (i.length) { // to minimize jellypotato, load the images one by one instead of all at once var img = i[0], t = document.getElementById('header-menu').getBoundingClientRect().bottom; var p = Array.apply(0, document.querySelectorAll('li[component="post"]')); p = document.querySelector('.highlight') || p.filter((e, i) => !i || e.getBoundingClientRect().top < t).pop(); i = document.createElement("img"); i.onload = i.onerror = function jellypotato() { setTimeout(loadImages, 20); var r = p.getBoundingClientRect(); img.src = i.src; img.setAttribute("data-state", "loaded"); var s = p.getBoundingClientRect(); if (r.top != s.top) { // if loading the image moved the top of the post we're anchored to, move it back!! window.scrollBy(0, s.top - r.top); } }; i.src = img.getAttribute("data-src"); img.setAttribute("data-state", "loading"); } } // the 2000ms delay is to let NodeBB finish jellypotatoing to the highlighted post new MutationObserver(function () { setTimeout(loadImages, 2000); }) .observe(document.getElementById("content"), {childList: true, subtree: true}); loadImages();
-
@anotherusername feel free to steal from mine. it includes refocusing on the selected post after jellypotato, and includes nodebb hooks.
// ==UserScript== // @name tdwtf forum - unfuck image loading // @namespace Lorne // @include https://what.thedailywtf.com/topic/* // @version 1 // @grant none // @runat document-end // ==/UserScript== var $ = unsafeWindow.jQuery; function DoStupidScroll() { var $ = unsafeWindow.jQuery; var $hl = $(".highlight"); if($hl.length > 0) { $('html, body').animate({scrollTop: $hl.offset().top}, 100); } } $(document).ready(function() { $(window).on('action:topic.loaded', function(event, data) { DoStupidScroll(); // image load hook $("img").load(function(e) { DoStupidScroll(); }); }); /* $(document).on("load", "img", function(e) { console.log("image loaded", this); }); // $(".img-responsive").bind("changeData": function() {console.log("data was changed"); } ); // $(".img-responsive").bind("setData": function() {console.log("data was setData"); }); // $("img").load(function(e) { console.log("image loaded2", this); }); $(document).on("action:post.tools.load", "*", function(e) { console.log("action:post.tools.load"); }); $(document).on("action:topic.loaded", "*", function(e) { console.log("action:post.tools.load"); }); $(document).on("action:ajaxify.dataLoaded ", "*", function(e) { console.log("action:ajaxify.dataLoaded "); }); */ LoadImagesForce(); console.log("document ready"); }); function LoadImagesForce() { var $ = unsafeWindow.jQuery; var $imgs = $(".img-responsive"); // console.log($imgs); $imgs.each(function() { var $ = unsafeWindow.jQuery; var $this = $(this); // console.log(this); // console.log("this.src", $this.attr("src")); // console.log("this.data.src", $this.data("src")); //console.log("this.data.state", $this.data("state")); if($this.attr("src")=="about:blank") { // console.log("loading ", this); $this.data("state", "loaded"); $this.attr("data-state", "loaded"); $this.attr("src", $this.data("src")); // console.log("loaded ", this); } //console.log('$this.data("src") = ', $this.data("src")); //console.log('$this.attr("src") = ', $this.attr("src")); }); setTimeout(LoadImagesForce, 2000); }```