☰

DONE - Visual Sign Of A Loaded Page

Shows a big DONE sign when the page is fully loaded

当前为 2014-08-08 提交的版本，查看 最新版本。

// ==UserScript==
// @name          DONE - Visual Sign Of A Loaded Page
// @namespace     http://userscripts.org/users/23652
// @description   Shows a big DONE sign when the page is fully loaded
// @include       http://*.*/*
// @include       https://*.*/*
// @copyright     JoeSimmons
// @version       1.0.1
// @license       GPL version 3 or any later version; http://www.gnu.org/copyleft/gpl.html
// @grant         GM_addStyle
// ==/UserScript==

+function () {
    'use strict';

    // temporary fade function until I implement one in JSL
    function fade(dir, element) {
        var interval = 0.05,
            fps = Math.floor(1000 / 60),
            count, intv;

        function anim() {
            var curOpacity = parseFloat(element.style.opacity);

            if (dir === 'in') {
                if (curOpacity >= 1) {
                    count = 1;
                    element.style.opacity = '1';
                    window.clearInterval(intv);
                } else {
                    element.style.opacity = (count += interval);
                }
            } else if (dir === 'out') {
                if (curOpacity <= 0) {
                    count = 0;
                    element.style.opacity = '0';
                    element.style.display = 'none';
                    window.clearInterval(intv);
                } else {
                    element.style.opacity = (count -= interval);
                }
            }
        }

        if (typeof element === 'string') {
            element = document.getElementById(element);
        }

        if (dir === 'in') {
            element.style.opacity = '0';
            count = 0;

            if (element.style.display === 'none') {
                element.style.display = '';
            }
        } else if (dir === 'out') {
            element.style.opacity = '1';
            count = 1;
        } else {
            return;
        }

        intv = window.setInterval(anim, fps);
    }

    // runAfterPageIdle by JoeSimmons
    // supply it a function and it will run when the page stops mutating
    function runAfterPageIdle(fn) {
        'use strict'; // can remove if parent is running in strict already; would save some bytes

        var time = Date.now(),
            set = window.setInterval.bind(window),
            clear = window.clearInterval.bind(window),
            idleTime = 500, // adjustable -- the time after which the page has been idle, the user's function will run
            intv;

        function listen(a) {
            var now = Date.now(); // why call Date.now() twice? :)

            if (typeof a === 'undefined' && (now - time) >= idleTime) {
                // clear if it's been idle for the set length of time
                done();
            } else if (typeof a === 'object') {
                // reset if it hasn't been idle for the set length of time
                time = now;
            }
        }

        function done() {
            // clear the interval
            clear(intv);

            // remove listeners
            document.removeEventListener('DOMSubtreeModified', listen, false);
            document.removeEventListener('DOMNodeInserted', listen, false);
            document.removeEventListener('DOMNodeRemoved', listen, false);

            // run user at next event loop slot
            window.setTimeout(fn, 0);
        }

        if (typeof JSL !== 'undefined' && typeof JSL.setInterval === 'function' && typeof JSL.clearInterval === 'function') {
            set = JSL.setInterval.bind(JSL);
            clear = JSL.clearInterval.bind(JSL);
        }

        if (typeof fn === 'function') {
            intv = set(listen, 125); // check 8 times per second

            // set listeners
            document.addEventListener('DOMSubtreeModified', listen, false);
            document.addEventListener('DOMNodeInserted', listen, false);
            document.addEventListener('DOMNodeRemoved', listen, false);
        }
    }

    function main() {
        var box = document.createElement('div'),
            boxWidth = Math.floor(window.innerWidth * 0.95);

        GM_addStyle('' +
            '#load_sign { ' +
                'background: #D7FFD7; ' +
                'border: 3px ridge #008000; ' +
                'color: #00C400; ' +
                'display: block; ' +
                'font-style: Arial; ' +
                'font-size: 24pt; ' +
                'height: 42px; ' +
                'left: ' + (window.innerWidth / 2 - boxWidth / 2) + 'px; ' + // division comes first here so it works
                'margin: 0 auto; ' +
                'min-height: 42px; ' +
                'padding: 4px 0; ' +
                'position: fixed; ' +
                'text-align: center; ' +
                'text-shadow: 2px 2px 4px #C7C7C7; ' +
                'top: 0; ' +
                'width: ' + boxWidth + 'px; ' +
                'z-index: 2100100100; ' +
            '}' +
        '');

        box.id = 'load_sign';
        box.appendChild( document.createTextNode('LOADED') );
        document.body.appendChild(box);

        window.setTimeout(function () {
            fade('out', 'load_sign');
        }, 750);
    }

    // make sure the page is not in a frame
    if (window.frameElement || window !== window.top) { return; }

    runAfterPageIdle(main);
}();