Не получается скрыть элементы с помощью jQuery

109

07 сентября 2021, 15:10

Не получается скрыть иконки ссылок .links a img в версии сайта для слабовидящих. Задумка была, что при открытии версии для слабовидящих картинки скрываются, а вместо них показываются текстовые ссылки. В локальной версии все работает, а как только загружаю в сеть то перестает. Ошибок в консоли не показывает, если ввожу код через консоль он срабатывает. Есть подозрение, что картинки не успевают загрузиться до применения кода к ним, ведь весь остальной код работает. Пробовал сделать с помощью события onload - картинки при загрузке появляются, затем скрываются, но хотелось бы, чтобы они изначально не показывались

$(document).ready(function() { 
 
  function loadform() { 
    $("<button style='float:right'  onclick='$.removeCookie(\"openspec\", { path: \"/\" });location.reload();'>Закрыть версию для слабовидящих</button>").insertBefore("body"); 
    $("body").before("<iframe width='100%' height='110'  style='border: none' src='specver/spec.html'></iframe>"); 
 
    //Добавлено: 
    //    спрятать изображения блока ссылок, поиск, кнопку спецверсии 
    $(" .links a img, .search-form, .header-links button").hide(); 
 
    //    показать ссылки текстом вместо изображений 
    $(".links .texthide").css("display", "flex"); 
 
    //    увеличенный шрифт по умолчанию 
    $("body p, .header-links, footer a, .navigation a").css("font-size", "150%"); 
    $("h2").css("font-size", "250%"); 
    $(".menu > li span, .sub-menu a").css("font-size", "130%"); 
    $(".menu > li > a").css("font-size", "160%"); 
    $("body *").css("font-family", "Arial"); 
  }; 
 
  $('.spec').click(function(e) { 
 
    if (!$.cookie('openspec')) { 
      $.cookie('openspec', 1, { 
        path: '/' 
      }); 
      $("body *").css("background", "#fff"); 
      $("body *").css("color", "#000"); 
      $("img").css("-webkit-filter", "grayscale(100%)"); 
      loadform(); 
    } 
  }); 
 
  if ($.cookie('openspec') == 1) 
    loadform(); 
});

Порядок подключения скриптов ниже (последний файл с чистым JS для открытия меню)

<head> 
  <meta charset="utf-8"> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <title>сайт</title> 
  <link rel="stylesheet" href="styles/style.css" type="text/css" /> 
  <link rel="stylesheet" href="styles/media.css" type="text/css" /> 
  <script src="specver/js/jquery-2.2.3.min.js"></script> 
  <script src="specver/js/jquery.cookie.js"></script> 
  <script src="specver/js/specver.js"></script> 
  <script async src="scripts/script.js"></script> 
</head>

<div class="links"> 
  <div class="column"> 
    <a href="#"><img src="images/ao.png" alt="Описание картинки" /><span class="texthide">текст</span></a> 
    <a href="#"><img src="images/sc.png" alt="Описание картинки" /><span class="texthide">текст</span></a> 
  </div> 
  <div class="column"> 
    <a href="#"><img src="images/pr.png" alt="Описание картинки" /><span class="texthide">текст</span></a> 
    <a href="#"><img src="images/pu.png" alt="Описание картинки" /><span class="texthide">текст</span></a> 
  </div>