Изменить изображение с шириной страницы resize

Question

Мне нужна помощь с этим кодом JavaScript, я все новичок в использовании javascript, поэтому, когда я застреваю, это раздражает. То, что я пытаюсь сделать, - это изменить изображение, отображаемое в моей навигационной панели, когда на маленьких экранах (мобильные телефоны), потому что цвет панели навигации меняется. То, что я до сих пор придумал, обыскав в Интернете, а некоторые игры работают только при уменьшении размера экрана, а затем изображение меняется так, как должно. Однако я хочу, чтобы он загружался в этом состоянии, и вот где я застрял.

$(window).on('resize', function(){ 
    var win = $(this); 
    if (win.width() < 768) { 
     $(".navbar-brand img").attr('src', 'img/icons/logowhite.png'); 
    } else { 
    $(".navbar-brand img").attr('src', 'img/icons/logodark.png'); 
}}); 

Это может быть сделано в css, а также вопрос, который у меня есть?

Answer 1

demo in fiddle

JS

function resize(){ 
    if ($(window).width() < 768) { 
     $(".navbar-brand img").attr('src', 'https://www.google.com/images/srpr/chrome_ntp_white_logo2.png'); 
    } else { 
    $(".navbar-brand img").attr('src', 'https://www.google.com/images/srpr/logo11w.png'); 
    } 
} 
resize(); 
$(window).on('resize', resize); 

<div class='navbar-brand'> 
    <img src=''/> 
</div> 

Answer 2

Это может быть сделано в css, а также вопрос, который у меня есть?

Это намного проще и лучше в CSS, чем в Javascript!

Прочитайте этот вопрос: Responsive design with media query : screen size?

код, чтобы изменить фоновое изображение с помощью CSS

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) { 
    div { 
     background-image: url("img/icons/logowhite.png"); 
    } 
} 
@media only screen and (min-device-width : 768px) { 
    div { 
     background-image: url("img/icons/logodark.png"); 
    } 
} 

Answer 3

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

Проверьте это answer помогает вам