Super User is a question and answer site for computer enthusiasts and power users. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

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.

share|improve this question
up vote 2 down vote accepted

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);
}());
share|improve this answer

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 }
share|improve this answer
    
This is a good start! The main problem with your CSS is that it will disable background-color along with background-image. The background property is shorthand and the browser sets each part of it accordingly, so background-image: none !important should suffice. – iglvzx Apr 17 '12 at 19:45

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.

share|improve this answer
    
Thanks for this! I tried this on this page - it can hide most of the images, but not the SuperUser logo image. Also, is there a way to make this unhide images from a page previously set to hide images, without reloading? – galacticninja Dec 21 '10 at 21:32
    
Sorry but I don't know the code to undo the zapping. Maybe someone who knows may share it with us. – Mehper C. Palavuzlar Dec 21 '10 at 21:48

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .