Javascript

画面サイズによって画像を入れ替える

'18.12.08

620pxを基準に画像を切り替える場合、

</body>タグの直線に以下のコードを記載

<script>
$(function(){
var $setElem = $('.switch'),
pcName = '_pc',
spName = '_sp',
repWidth = 621;
$setElem.each(function(){
var $this = $(this);
function imgSize(){
if(window.innerWidth > repWidth) {
$this.attr('src',$this.attr('src').replace(spName,pcName)).css({visibility:'visible'});
} else {
$this.attr('src',$this.attr('src').replace(pcName,spName)).css({visibility:'visible'});
}
}
$(window).resize(function(){imgSize();});
imgSize();
});
});
</script>

「repWidth」の値がブレイクポイント。

CSSに以下を記載

.switch {
visibility:visible;
}

 

(View1740)