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);
}());