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); ウィンドウのサイズ変更イベントで関数を実行します。

---

回答№2の場合は1

宣言されたサイズ変更関数をで呼び出す必要があります

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);
});

---

回答№3の場合は1

あなたは。サイズを変更する（）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");
}
}

---

回答№4の場合は0

次のようなサイズ変更イベントを待ち受けるのを忘れてしまった：

$(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();
});
});

---

回答№5の場合は0

たぶん、JavaScriptを使用する代わりに、このためにCSSの@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>

---