Take the 2-minute tour ×
Super User is a question and answer site for computer enthusiasts and power users. It's 100% free, no registration required.

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
add comment

3 Answers

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
add comment

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
add comment

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
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.