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();
    

  • Trolleybus Mechanic

    @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);
    }```