Question

If this question is totally unsuitable, please forgive me. I don’t know anything about programming. I should learn Javascript, I know, but it is a bit difficult for a total layman.

I have two bookmarklets and one userscript that, together, do what I need; but I need to click, wait, and click. Could they all be combined into a single bookmarklet? This is for Firefox 5, on Windows XP.

The first bookmarklet takes all links on a page that point to images and displays all these images in a single page in a new tab:

javascript:(function(){function%20I(u){var%20t=u.split('.'),e=t[t.length-1].toLowerCase();return%20{gif:1,jpg:1,jpeg:1,png:1,mng:1}[e]}function%20hE(s){return%20s.replace(/&/g,'&amp;').replace(/>/g,'&gt;').replace(/</g,'&lt;').replace(/"/g,'&quot;');}var%20q,h,i,z=open().document;z.write('<p>Images%20linked%20to%20by%20'+hE(location.href)+':</p><hr>');for(i=0;q=document.links[i];++i){h=q.href;if(h&&I(h))z.write('<p>'+q.innerHTML+'%20('+hE(h)+')<br><img%20src="'+hE(h)+'">');}z.close();})()

Then the userscript kicks in, which changes the title of the page to include [Page loaded]:

// ==UserScript==
// @name           Add "loaded" to title if page is loaded
// @namespace      my
// @description    Indicate if a page is loaded
// @include        *
// ==/UserScript== 

window.addEventListener(
    'load',
    function (e) {
        document.title += " - [Page loaded]";
    }, 
    false); 

Lastly, I click the second bookmarklet, which removes all text and all images smaller than a certain size from the page, and gives it a black background. It’d like this part to kick in only after all images have been loaded (hence the “loaded” title from the userscript).

I have to put this in in-line code, because the other methods seemed to fail (neither the code button nor blockquote did anything). It would be awesome if someone could help me out! I couldn’t write a single line of Javascript myself and have no idea what to do.

function wrap(image, href) {
    var img = document.createElement('img');
    var div = document.createElement('div');
    img.src = image.src;
    var node = image.parentNode;
    if (!href) {
        div.appendChild(img);
    } else {
        var a = document.createElement('a');
        a.href = href;
        a.appendChild(img);
        div.appendChild(a);
    }
    return div;
}
function findNext(document) {
    var res = document.evaluate('//a[@rel='
    next ']', document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null);
    if (res.singleNodeValue) {
        return res.singleNodeValue.href;
    } else {
        return null;
    }
}
if ('scrollMaxY' in window) {
    function getScrollMaxY() {
        return window.scrollMaxY;
    }
} else {
    function getScrollMaxY() {
        return document.body.scrollHeight - window.innerHeight;
    }
}
function streamify() {
    var contentDiv = document.createElement('div');
    var imageDiv = document.createElement('div');
    var moreButton = document.createElement('input');
    var style = document.createElement('style');
    var iframe = document.createElement('iframe');
    var errorSpan = document.createElement('span');
    var retryButton = document.createElement('input');
    var currentPageDiv = document.createElement('div');
    var currentPageLink = document.createElement('a');
    var nextUrl = findNext(document);
    var occured = {};
    var images = [];
    var loadTimer = null;
    var scrolledToBottom = false;

    function extract(elem, href, images) {
        switch (elem.localName) {
        case 'a':
            href = elem.href;
            break;
        case 'img':
            if (!(elem.src in occured) && elem.offsetWidth > 250 && elem.offsetHeight > 300) {
                images.push(wrap(elem));
                occured[elem.src] = true;
            }
        }
        var child = elem.firstElementChild;
        while (child) {
            extract(child, href, images);
            child = child.nextElementSibling;
        }
    }
    function loadNext() {
        if (loadTimer !== null) {
            window.clearTimeout(loadTimer);
        }
        if (nextUrl) {
            loadTimer = window.setTimeout(function () {
                errorSpan.style.display = '';
                loadTimer = null;
            }, 30000);
            iframe.src = nextUrl;
        }
    }
    style.type = 'text/css';
    style.appendChild(document.createTextNode('body {background-color: black;color: white;}a {color: white;font-weight: bold;text-decoration: none;}a:hover {text-decoration: underline;}#greasemonkey-image-stream-content {text-align: center;}#greasemonkey-image-stream-content > div > div {margin-top: 2em;margin-bottom: 2em;}#greasemonkey-image-stream-content input {padding: 0.5em;font-weight: bold;}'));
    contentDiv.id = 'greasemonkey-image-stream-content';
    currentPageLink.appendChild(document.createTextNode('current page'));
    currentPageLink.href = window.location.href;
    currentPageDiv.appendChild(currentPageLink);
    moreButton.type = 'button';
    moreButton.value = 'More';
    moreButton.disabled = true;

    function handleMore() {
        currentPageLink.href = iframe.src;
        scrolledToBottom = false;
        errorSpan.style.display = 'none';
        moreButton.disabled = true;
        for (var i = 0; i < images.length; ++i) {
            imageDiv.appendChild(images[i]);
        }
        images = [];
        loadNext();
    }
    moreButton.addEventListener('click', handleMore, false);
    retryButton.type = 'button';
    retryButton.value = 'Retry';
    retryButton.addEventListener('click', function (event) {
        loadNext();
        errorSpan.style.display = 'none';
    }, false);
    errorSpan.style.fontWeight = 'bold';
    errorSpan.style.color = 'red';
    errorSpan.style.display = 'none';
    errorSpan.appendChild(document.createTextNode(' Load Error '));
    errorSpan.appendChild(retryButton);
    iframe.style.width = '0px';
    iframe.style.height = '0px';
    iframe.style.visibility = 'hidden';
    iframe.addEventListener('load', function (event) {
        if (loadTimer !== null) {
            window.clearTimeout(loadTimer);
        }
        errorSpan.style.display = 'none';
        nextUrl = findNext(iframe.contentDocument);
        extract(iframe.contentDocument.body, null, images);
        if (images.length == 0 && nextUrl) {
            loadNext();
            moreButton.disabled = true;
        } else {
            moreButton.disabled = !nextUrl && images.length == 0;
            if (scrolledToBottom && (nextUrl || images.length > 0)) {
                handleMore();
            }
        }
    }, false);
    extract(document.body, null, images);
    for (var i = 0; i < images.length; ++i) {
        imageDiv.appendChild(images[i]);
    }
    images = [];
    contentDiv.appendChild(style);
    contentDiv.appendChild(currentPageDiv);
    contentDiv.appendChild(imageDiv);
    contentDiv.appendChild(moreButton);
    contentDiv.appendChild(errorSpan);
    contentDiv.appendChild(iframe);
    var elem = document.documentElement.firstElementChild;
    while (elem) {
        switch (elem.localName) {
        case 'head':
            var child = elem.firstElementChild;
            while (child) {
                var next = child.nextElementSibling;
                if (child.localName != 'title') {
                    elem.removeChild(child);
                }
                child = next;
            }
            break;
        case 'body':
            while (elem.firstChild) {
                elem.removeChild(elem.firstChild);
            }
        }
        elem = elem.nextElementSibling;
    }
    window.addEventListener('scroll', function (event) {
        if (window.scrollY >= getScrollMaxY()) {
            scrolledToBottom = true;
            moreButton.click();
        }
    }, false);
    document.body.appendChild(contentDiv);
    loadNext();
}
streamify();
void(0)

Answer 1

(function(){
  var a=Array.filter(document.getElementsByTagName('a'),function(e){
    var h=e.href.split('.').pop().toLowerCase();
    return {gif:1,jpg:1,jpeg:1,png:1,mng:1}[h];
  }),b=document.getElementsByTagName('body')[0],i=0,l=a.length;
  b.innerHTML='';
  b.style.background='#000';
  b.style.color='#ddd'
  for(i;i<l;i++){
    var t=a[i].href,p=document.createElement('img'),s=document.createElement('div');
    s.innerHTML=t;
    p.src=t;
    b.appendChild(p);
    b.appendChild(s);
  }
})()

Here it is compressed

javascript:(function(){var c=Array.filter(document.getElementsByTagName("a"),function(a){return{gif:1,jpg:1,jpeg:1,png:1,mng:1}[a.href.split(".").pop().toLowerCase()]}),a=document.getElementsByTagName("body")[0],b=0,g=c.length;a.innerHTML="";a.style.background="#000";a.style.color="#ddd";for(b;b<g;b++){var d=c[b].href,e=document.createElement("img"),f=document.createElement("div");f.innerHTML=d;e.src=d;a.appendChild(e);a.appendChild(f)}})();

One that waits for each image to load. Added error detection.

(function(){
  var a=Array.filter(document.getElementsByTagName('a'),function(e){
    return {gif:1,jpg:1,jpeg:1,png:1,mng:1}[e.href.split('.').pop().toLowerCase()];
  }),b=document.getElementsByTagName('body')[0],i=0,l=a.length;
  b.innerHTML='';
  b.style.background='#000';
  b.style.color='#ddd'
  add(0);
  function add(i){
    var img=new Image(),t=a[i].href,p=document.createElement('img'),s=document.createElement('div');
    img.src=t;
    img.onload=function(){
      s.innerHTML=t;
      p.src=t;
      b.appendChild(p);
      b.appendChild(s);
      ++i<a.length?add(i):'';
    };
    img.onerror=function(){
      ++i<a.length?add(i):'';
    };
  }
})()

And the minified version.

javascript:(function(){function d(b){var e=new Image,c=f[b].href,g=document.createElement("img"),h=document.createElement("div");e.src=c;e.onerror=function(){++b<f.length&&d(b)};e.onload=function(){h.innerHTML=c;g.src=c;a.appendChild(g);a.appendChild(h);++b<f.length&&d(b)}}var f=Array.filter(document.getElementsByTagName("a"),function(a){return{gif:1,jpg:1,jpeg:1,png:1,mng:1}[a.href.split(".").pop().toLowerCase()]}),a=document.getElementsByTagName("body")[0];a.innerHTML="";a.style.background="#000";a.style.color="#ddd";d(0)})();

Here is some test HTML

<a href='http://mozcom-cdn.mozilla.net/img/covehead/about/logo/download/logo-only-preview.png'>Firefox</a>
<a href='http://ie.microsoft.com/testdrive/Graphics/IEBeatz/assets/ie-logo-small.png'>IE</a>
<a href='http://code.google.com/tv/images/chrome-logo.png'>Chrome</a>

I did not add limiter on size of images because I was not sure if it was necessary and I wasn’t sure what size limit you wanted.