Блог

Главная - Вопросы по программированию - Как скрыть все изображения с помощью javascript?

Как скрыть все изображения с помощью javascript?

#javascript #html #google-chrome

#javascript #HTML #google-chrome

Вопрос:

Я внедряю код JavaScript на веб-сайт для личного использования, используя расширение Google Chrome… Я хотел бы скрыть все изображения перед загрузкой страницы… У меня есть скрипт для запуска перед загрузкой чего-либо, но, похоже, я не могу получить правильный код для скрытия массива изображений … что-то вроде:

 function beforeload(){
  document.getElementsByTagName('img')[0].style.display = "none"
}

В принципе, я хочу, чтобы ко всем тегам изображений был добавлен style =»display: none» к атрибутам. как мне это сделать?

Ответ №1:

Вам нужно выполнить цикл на них

 var images = document.getElementsByTagName('img');
for (i = 0; i < images.length;i   ) {
    images[i].style.display = "none";
}

Комментарии:

1. С какой стати вам запускать getElementsByTagName на каждой итерации? Я предполагаю, что вы имели в виду сделать images[i]... в теле цикла…

2. @Sean Kinsey: спасибо, что уловили это, я забыл изменить это перед вставкой кода сюда.

Ответ №2:

У Amr есть способ сделать это с помощью javascript. Если вы добавите jquery на страницу, она займет всего одну строку

 $('img').hide();

Ответ №3:

Приведенный ниже код будет скрывать изображения только всех элементов изображения

 let images = document.getElementsByTagName("img");
    let images_length = images.length;
    for (let i = 0; i < images_length; i  ) {
      images[i].style.setProperty("display", "none", "important");
    }

но что, если изображения отображаются с использованием CSS?
Решение для всех элементов

  let images = document.getElementsByTagName("img");
    let images_length = images.length;
    for (let i = 0; i < images_length; i  ) {
      images[i].style.setProperty("display", "none", "important");
    }

    /** now also hide images which are implemented in css */
    let all_elements = document.querySelectorAll("*");
    for(let i = 0 ; i < all_elements.length ; i  ){
      all_elements[i].style.setProperty("background-image","unset","important");
    }  
 .image {
  width : 100px;
  height : 100px;
  background-image : url(https://image.shutterstock.com/image-photo/aerial-view-main-faisal-mosque-600w-1242735640.jpg);
}  
 <img src="https://image.shutterstock.com/image-photo/aerial-view-main-faisal-mosque-600w-1242735640.jpg" width="100" height="100">
<div class="image"></div>
<div> To show images plz comment/remove js </div>

Ответ №4:

Проверьте это:http://ncthakur.itgo.com/js09.htm

Это не совсем то, что вы ищете, но вы можете использовать некоторую его часть.

Мне потребовалось 7 секунд, чтобы найти это в Google 😉