browser - Firefox - setting/extension to toggle between showing & hiding of all images, without reloading the page

I'm looking for a Firefox setting or extension that can easily toggle between showing and hiding of all images without reloading the page (similar to Opera's feature - the 'Show only cached images' feature is preferable, but optional in my case).

I have found an extension that can show/hide images (Image-Show-Hide) but it needs to reload the page to show/hide the images.

I prefer that the page not reload when unhiding images from a page previously set to hide all images.

ImagePref is an extension which allows you to toggle image display without reloading, although the homepage does mention that it may not work in certain (unnamed) circumstances. I have noticed it running sluggishly if there are many open tabs.

If you're willing to accept tradeoffs, here's another bookmarklet which does some of what you're asking for:

javascript:(function(){function%20toggleImages(root){var%20stylesheet,stylesheetId='bookmarklet-hide-image-stylesheet',rules='*%20{%20background-image:%20none%20!important;%20}%20img,%20input[type=image],%20object[type^=image]%20{%20visibility:%20hidden%20!important;%20}',tagNames=['frame','iframe'],elements,i,j;stylesheet=root.getElementById(stylesheetId);if(stylesheet){stylesheet.parentNode.removeChild(stylesheet);}else{stylesheet=root.createElement('style');stylesheet.type='text/css';stylesheet.id=stylesheetId;if(stylesheet.styleSheet){stylesheet.styleSheet.cssText=rules;}else{stylesheet.appendChild(root.createTextNode(rules));}root.getElementsByTagName('head')[0].appendChild(stylesheet);}for(i=0;i<tagNames.length;i+=1){for(j=0,elements=root.getElementsByTagName(tagNames[i]);j<elements.length;j+=1){toggleImages(elements[j].contentDocument);}}}toggleImages(document);}());

It tries to hide and unhide background images, <img> tags and <input> and <object> tags with type="image", but there are still lots of weirder image delivery methods it won't pick up on, like <embed> or <object>s with <param> tags. It won't work across domains due to browser security measures (typically noticeable when there are ads in <iframes>), and it can be overridden by a user stylesheet or clobbered if a page uses !important.

Readable source code for the interested:

(function () {
    function toggleImages(root) {
        var stylesheet,
            stylesheetId = 'bookmarklet-hide-image-stylesheet',
            rules = '* { background-image: none !important; } img, input[type=image], object[type^=image] { visibility: hidden !important; }',
            tagNames = ['frame', 'iframe'],
            elements,
            i,
            j;

        stylesheet = root.getElementById(stylesheetId);
        if (stylesheet) {
            stylesheet.parentNode.removeChild(stylesheet);
        } else {
            stylesheet = root.createElement('style');
            stylesheet.type = 'text/css';
            stylesheet.id = stylesheetId;
            if (stylesheet.styleSheet) {
                stylesheet.styleSheet.cssText = rules;
            } else {
                stylesheet.appendChild(root.createTextNode(rules));
            }
            root.getElementsByTagName('head')[0].appendChild(stylesheet);
        }

        for (i = 0; i < tagNames.length; i += 1) {
            for (j = 0, elements = root.getElementsByTagName(tagNames[i]); j < elements.length; j += 1) {
                toggleImages(elements[j].contentDocument);
            }
        }
    }

    toggleImages(document);
}());

You don't need javascript. The OP wanted an easy way to toggle images without reloading the page and here it is:

Use the "Stylish" extension for Firefox/Chrome/etc, then use the code I added below. It will work for all sites and it will hide all images, videos (embeded), and background images.

@namespace url(http://www.w3.org/1999/xhtml);
/*Hide Images*/
IMG { display: none !important }
/*Hide Videos*/
iframe { display:none !important }
/*Hide Background*/
body {background:none !important }
a {background:none !important }
div {background-image:none !important }
div {background:none !important }

I can tell you how to kill all images on a page with one click and without reloading the page. Just save the following code line as a bookmark on Firefox's Bookmark Toolbar, and name it "zap images".

javascript:(function(){function%20toArray%20(c){var%20a,%20k;a=new%20Array;for%20(k=0;%20k%20<%20c.length;%20++k)a[k]=c[k];return%20a;}var%20images,%20img,%20altText;images=toArray(document.images);for%20(var%20i=0;%20i%20<%20images.length;%20++i){img=images[i];altText=document.createTextNode(img.alt);img.parentNode.replaceChild(altText,%20img)}})();

Now, open a web page with images, and click on this bookmark. You just zapped the images. However, in order to bring them back, you need to refresh the page.