Переключение img src в определенное окно просмотра

Полностью тупик относительно того, почему это не работает. Попытка переключить источник изображения, когда область просмотра меньше 500 пикселей, возможно, что-то действительно глупо, я делаю неправильно, но просто не вижу его.Переключение img src в определенное окно просмотра

$(document).ready(function() { 


var width = $(window).width(); 

if (width <= 500) { 

$("#my-image").attr("src","images/img-2.png"); 
} else { 
$("#my-image").attr("src","images/img-1.png"); 
} 

}); 

<div> 

    <img id="my-image"> 

</div>

источник

2015-05-14 Ally Baird

https://api.jquery.com/resize/ – lifetimes

ли вы ожидать, что изображение меняется, когда ширина изменяется, или просто в зависимости от исходной ширины? – Amit

ах, не думал об этом, просто смотрел на начальный вид, но когда ширина была изменена, было бы намного лучше. –

Вот полный пример использования resize()

$(document).ready(function() { 

    var img = $("#my-image"); 

    var $window = $(window).on('resize', function(){ 
     var width = $window.width(); 

     if (width <= 500) { 
      img.attr("src","images/img-2.png"); 
     } else { 
      img.attr("src","images/img-1.png"); 
     } 
    }); 
});

источник

2015-05-14 19:06:33 Jack

Brilliant !! Это отлично работает благодаря Jack –

@AllyBaird приветствуется – Jack

Это сработало для меня, но изначально src пуст. Поэтому я добавил исходный код сразу после «$ (document) .ready (function() {" – user1636946

Вы могли бы использовать:

$(window).resize(function() { 

});

Затем проверьте ширина каждый раз изменяет размер окна.

источник

2015-05-14 19:00:20 deluxes

это просто заменит переменную ширины? Я ни в коем случае не специалист JS: ( –

Переключение img src в определенное окно просмотра

ответ

Смежные вопросы