Обновление HTML в режиме реального времени с использованием jQuery

Question

На настольных компьютерах мой бренд Navbar содержит только одно увеличенное изображение. Но для мобильных устройств я хочу, чтобы это увеличенное изображение было заменено двумя меньшими. Для этого я использовал jQuery, и когда я проверяю его на мобильном телефоне, все выглядит так, как я хотел. Но проблема в том, что при изменении размера моего браузера изображение не заменяется в реальном времени. Есть ли способ, которым я мог бы достичь этого?

$(document).ready(function() {
    if ($(window).width() < 575.98) {
        $('.navbar-brand').children().remove();
        $('.navbar-brand').append('<img src="assets/images/Llogo AIP.png"><img src="assets/images/CoA RKS.png">');
    }
});

<a class="navbar-brand" href="index.html"><img src="assets/images/logo.png"></a>

Answer 1

Это происходит потому, что изображение заменяется только после того, как документ готов, то есть, когда документ завершил загрузку.

Если вы хотите изменить изображения при изменении размера окна, вам нужен обработчик события изменения размера, как указал Мамун. out.

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

$(document).ready(function() {
    setNavImages();)
});

$(window).resize(function(){
    setNavImages()
});

function setNavImages(){
    if ($(window).width() < 575.98) {
        $('.navbar-brand').children().remove();
        $('.navbar-brand').append('<img src="assets/images/Llogo AIP.png"><img src="assets/images/CoA RKS.png">');
    }else{
        $('.navbar-brand').children().remove();
        $('.navbar-brand').append('<img src="[your original image here]">');
    }
}

Answer 2

Чтобы получить код, который будет выполнен при изменении размера окна , вы должны использовать .resize():

resize событие отправляется элементу окна при изменении размера окна браузера .

$(window).resize(function() {....

Демо:

$(document).ready(function() {
  if ($(window).width() < 575.98) {
    $('.navbar-brand').children().remove();
    $('.navbar-brand').append('<img src="https://homepages.cae.wisc.edu/~ece533/images/pool.png"><img src="https://homepages.cae.wisc.edu/~ece533/images/fruits.png">');
  }
  $(window).resize(function() {
    if ($(window).width() < 575.98) {
      $('.navbar-brand').children().remove();
      $('.navbar-brand').append('<img src="https://homepages.cae.wisc.edu/~ece533/images/pool.png"/><img src="https://homepages.cae.wisc.edu/~ece533/images/fruits.png"/>');
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a class="navbar-brand" href="index.html"><img src="assets/images/logo.png"></a>

Answer 3

С этим кодом навигационная панель будет меняться, как вы хотите, при каждом изменении размера, например.

$(document).ready(function() {
    navbarBrandContent = $('.navbar-brand').html();
    changeNavbarBrand();
});

$(window).resize(function() {
    changeNavbarBrand();
});

function changeNavbarBrand() {
    if ($(window).width() < 575.98) {
        $('.navbar-brand').children().remove();
        $('.navbar-brand').append('<img src="assets/images/Llogo AIP.png"><img src="assets/images/CoA RKS.png">');
    } else {
        $('.navbar-brand').html(navbarBrandContent);
    }
}

Answer 4

Как сказал @Mamun и вызвать его на готовом документе

или лучше использовать bootstrap hidden-xs visible-md classes

$(document).ready(function() {

  $(window).resize(function() {
    if ($(window).width() < 575.98) {
      $('.navbar-brand').children().remove();
      $('.navbar-brand').append('<img src="assets/images/Llogo AIP.png"><img src="assets/images/CoA RKS.png">');
    }
  });

  $(window).resize(); // call it here after define it 
});

<a class="navbar-brand" href="index.html"><img src="assets/images/logo.png"></a>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>