Проблема з обмінним зображенням jQuery - jQuery

Я намагаюся створити простий підкачки img src, колирозмір веб-переглядача змінюється на менший, але з деяких причин код не працює. Сподіваюся, що хтось може допомогти з цим питанням. У мене 2d зображення в тій же папці, що й перша.

Дякую

HTML код:

<div class="body-bg">
<img src="/images/img-01.jpg" class="img-01">
<h1>Example</h1>
<h2>Example</h2>
</div>

jQuery код:

$(function(){

var $window = $(window);

function resize() {
if ($window.width() < 750) {
$(".img-01").attr("src","img-01.jpg");
}
else if ($window.width() > 750) {
$(".img-01").attr("src","img-02.jpg");
}
}

});

Відповіді:

1 для відповіді № 1

Ви насправді не запускаєте resize функції. Спробуйте замінити JavaScript цим:

$(function(){
var $window = $(window);

function resize() {
if ($window.width() < 750) {
$(".img-01").attr("src","img-01.jpg");
}
else if ($window.width() > 750) {
$(".img-01").attr("src","img-02.jpg");
}
}

$window.on("resize", resize);
});

$window.on("resize", resize); виконує функцію на події розміру вікна.

---

1 для відповіді № 2

Ви повинні викликати заявлену функцію зміни розміру в

1) Документ готовий функції і

2) на вікні зміни розміру події.

Також код для вибору зображення може бути оптимізований, як показано нижче.

$(function(){

var $window = $(window);
var img_01= $(".img-01");
function resize() {
img_01.attr("src",$window.width() < 750 ? "img-01.jpg" :"img-02.jpg");
}
resize();
$window.on("resize", resize);
});

---

1 для відповіді № 3

Ви повинні застосувати.змінити розмір() jquery метод

$(window).on("resize", function(){
var $window= $(this); //this = window
if ($window.width() < 750) {
$(".img-01").attr("src","img-01.jpg");
}else if ($window.width() > 750) {
$(".img-01").attr("src","img-02.jpg");
}
});

---

З чистими js:

window.onresize = function() {
if (window.innerHeight < 750) {
$(".img-01").attr("src","img-01.jpg");
}
if (window.innerWidth <= 1280) {
$(".img-01").attr("src","img-02.jpg");
}
}

---

0 для відповіді № 4

Ви забули прослухати подію розміру:

$(function() {

var $window = $(window);

function resize() {
if ($window.width() < 750) {
$(".img-01").attr("src", "img-01.jpg");
} else if ($resize()window.width() > 750) {
$(".img-01").attr("src", "img-02.jpg");
}
}

resize();

$window.on("resize", function() {
resize();
});
});

---

0 для відповіді № 5

Можливо, замість використання JavaScript, розглянемо використання CSS "s @media для цього? Згідно ця відповідь мобільні браузери повинні поважати @media, а не завантажувати непотрібні зображення.

<style>
.mobile-only{display: none;}
.desktop-only{display: block;}

@media (min-width:750px) {
.mobile-only{display: block;}
.desktop-only{display: none;}
}
</style>


<div class="body-bg">
<img src="/images/img-01.jpg" class="img-01 mobile-view">
<img src="img-01.jpg" class="img-01 desktop-view">
<h1>Example</h1>
<h2>Example</h2>
</div>

---