Firefox - настройка / расширение для переключения между отображением и скрытием всех изображений без перезагрузки страницы

Question

Я ищу параметр или расширение Firefox, которое может легко переключаться между отображением и скрытием всех изображений без перезагрузки страницы (аналогично функции Opera - функция «Показывать только кэшированные изображения» предпочтительна, но не обязательна в моем случае).

Я нашел расширение, которое может показать / скрыть изображения (Image-Show-Hide), но для этого нужно перезагрузить страницу, чтобы показать / скрыть изображения.

Я предпочитаю, чтобы страница не перезагружалась при отображении изображений на странице, ранее настроенной на скрытие всех изображений.

Answer 1

Вам не нужен JavaScript. ОП хотел простой способ переключения изображений без перезагрузки страницы, и вот он:

Используйте расширение "Стильный" для Firefox/Chrome/etc, затем используйте код, который я добавил ниже. Он будет работать на всех сайтах и будет скрывать все изображения, видео (встроенные) и фоновые изображения.

@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 }

Answer 2

ImagePref - это расширение, которое позволяет переключать отображение изображения без перезагрузки, хотя на домашней странице упоминается, что оно может не работать при определенных (неназванных) обстоятельствах. Я заметил, что это работает медленно, если есть много открытых вкладок.

Если вы готовы согласиться с компромиссами, вот еще один букмарклет, который выполняет часть того, о чем вы просите:

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

Он пытается скрыть и показать фоновые изображения, теги <img> теги <input> и <object> с type="image" , но все еще есть много более необычных способов доставки изображений, которые он не использует, например, <embed> или <object> с тегами <param> . Он не будет работать в разных доменах из-за мер безопасности браузера (обычно это заметно, когда в <iframes> есть реклама), и может быть переопределен таблицей стилей пользователя или перекрыт, если страница использует !important

Читаемый исходный код для заинтересованных:

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

Answer 3

Я могу рассказать вам, как убить все изображения на странице одним щелчком мыши и без перезагрузки страницы. Просто сохраните следующую строку кода в качестве закладки на панели инструментов закладок Firefox и назовите ее "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)}})();

Теперь откройте веб-страницу с изображениями и нажмите на эту закладку. Вы только что зарезали изображения. Однако, чтобы вернуть их, вам нужно обновить страницу.